Examples

Example 1

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

Code

JavaScript / Typescript

<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 / Typescript

<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;
}

Example 3

Team Red	Team Blue	Team Yellow	Team White

Code

JavaScript / Typescript

    <SliderXSelector
      optionCount={4}
      colors={["rgb(158, 44, 32)", "rgba(2, 50, 209,1)", "#ebeb00", "#ffffff"]}
      labels={["Team\nRed", "Team\nBlue", "Team\nYellow", "Team\nWhite"]}
      className={"sliderXExample3"}
      animationTime={100}
      defaultOptionIndex={0}
      options={EnumSliderXOptions.ClickableLabels}
    ></SliderXSelector>

CSS

.sliderXExample3 {
  --sliderX-track-box-shadow: 0px 0px 0px 2px #6b6b6b, 0px 0px 15px 0px #a7a7a7;
  --sliderX-track-height: 10px;
  --sliderX-track-border-radius: 4px;
  --sliderX-thumb-width: 4em;
  --sliderX-thumb-height: calc(5em - 18px);
  --sliderX-thumb-border: 3px solid var(--sliderX-var-dynamic-color);
  --sliderX-thumb-border-radius: 0em 0em 1em 1em;
  --sliderX-thumb-offset: 2em;
  --sliderX-thumb-color: transparent;
  --sliderX-thumb-hover-color: rgba(255, 255, 255, 0.1);
  --sliderX-thumb-active-color: rgba(255, 255, 255, 0.1);
}

.sliderXExample3-labels .sliderXExample3-label {
  font-size: 12px;
  margin-top: -5px;
}

.sliderXExample3-labels td:nth-child(1) .sliderXExample3-label {
  color: RGB(158, 44, 32);
  text-decoration-line: underline;
}

.sliderXExample3-labels td:nth-child(2) .sliderXExample3-label {
  color: RGBA(2, 50, 209, 1);
  text-decoration-line: underline;
}
.sliderXExample3-labels td:nth-child(3) .sliderXExample3-label {
  color: #ebeb00;
  text-decoration-line: underline;
}

.sliderXExample3-labels td:nth-child(4) .sliderXExample3-label {
  color: #ffffff;
  text-decoration-line: underline;
}