Examples

Example 1

1 Very low Risk	2 Low Risk	3 Medium Risk	4 High Risk	5 Very high Risk

Code

JavaScript

<SliderXSelector
      optionCount={5}
      colors={["#79ba57", "#a9d359", "#eacd51", "#ee883d", "#e26155"]}
      labels={[
        "1\nVery low\nRisk",
        "2\nLow\nRisk",
        "3\nMedium\nRisk",
        "4\nHigh\nRisk",
        "5\nVery high\nRisk",
      ]}
      className={"sliderXExample1"}
      animationTime={100}
      defaultOptionIndex={0}
    >
    </SliderXSelector>

CSS

.sliderXExample1-labels .sliderXExample1-label {
  color: whitesmoke;
}
.sliderXExample1 {
--sliderX-thumb-border: 1px solid rgb(163, 163, 163);
}

---

Example 2

Budapest	Győr	Bratislava	Brno	Prague	Berlin

Code

JavaScript

<SliderXSelector
      optionCount={6}
      colors={["#87CEEB"]}
      labels={["Budapest", "Győr", "Bratislava", "Brno", "Prague", "Berlin"]}
      className={"sliderXExample2"}
      animationTime={250}
      defaultOptionIndex={0}
      options={
        EnumSliderXOptions.DisableCenteredOptions |
        EnumSliderXOptions.ClickableLabels
      }
    >
    </SliderXSelector>

CSS

.sliderXExample2 {
  --sliderX-track-height: 1.5em;
  --sliderX-thumb-height: 1.5em;
  --sliderX-thumb-width: 2em;
  --sliderX-thumb-color: magenta;
  --sliderX-thumb-border-radius: 0.5em;
  --sliderX-track-border-radius: 0.5em;
}
.sliderXExample2 .sliderXExample2-labels {
  position: relative;
  width: 120%;
  left: -10%;
}
.sliderXExample2-labels .sliderXExample2-label {
  color: whitesmoke;
  text-decoration: underline 0.5px;
}