SliderXSelector

A slider component with predefined positions to select from multiple options

option 1	option 2	option 3	option 4	option 5

JavaScript / Typescript

<SliderXSelector
  optionCount={5}
  colors={["#3cc9a3", "#2f8eb8", "#6617a3", "#dea002", "#e00000"]}
  className={"sliderXSelectorExample"}
  labels={["option 1", "option 2", "option 3", "option 4", "option 5"]}
  animationTime={100}
  defaultOptionIndex={2}
></SliderXSelector>

Props

Name	Type	Optional	Default	Description
className	string	true		Additional classname to add to the component
onChange	function	true		Returns the index of the selected option
colors	array	true		Array of RGB,RGBA or HEX colors
optionCount	number	false		Number of options
defaultOptionIndex	number	true	0	Initially selected option. Invalid index is defaulted to the min or max index
labels	array	true		Array of strings for labels. Pass "" for empty label. \n works for linebreaks
id	string	true		Custom ID for the direct slider (<input>) element which overwrites the default generated random ID
options	EnumSliderXOptions	true		Slider behavior options. Use EnumSliderXOptions
index	number	true		Allows to externally control the selection. Invalid indexes are defaulted to min or max index.
animationTime	number	true	0	Time of full animation for selection change in microseconds. Use 0 for instant change.

Props​

Props