how to set color until thumb?

[prsh11]

  <ReactSlider
          className="slider"
          thumbClassName="thumb blue"
          trackClassName="track"
          min={15}
          max={120}
          value={workMinutes}
          step={5}
          onChange={(time) => {
            dispatch(setWork(convertToSec(time)));
          }}
        />

.slider {
  background-color: #4b4d4e;
  height: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
}
.thumb {
  cursor: pointer;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.blue {
  background-color: #00aefc;
}

.track {
  position: relative;
  background: #ddd;
}

I tried using the class track-0 but it does not work

[kris-ellery]

@notprash .track sets the default background color before first thumb, then each incremental class (.track.track-{n}) sets background color after each thumb.

In example, with 2 thumbs, you could set 3 background colors:

/* Default gray background before first thumb */
.track {
  background: #ddd;
}

/* Red background color after first thumb, but before the second thumb */
.track.track-1 {
  background: #f00;
}

/* Green background color after second thumb */
.track.track-2 {
  background: #0f0;
}

[prsh11]

It is not working for some reason.

.track {
  background:  white;
}

Still not showing up

[kris-ellery]

@notprash can you please provide a reproduction? A CodeSandbox would be great. There might be something else in your CSS that affects the track styles. Thanks!

[prsh11]

here

[kris-ellery]

@notprash here is the CSS that would fix your issues:

.slider {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20px; /* You must set slider height, usually same as thumb height */
  width: 500px;
}

.thumb {
  cursor: pointer;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.blue {
  background-color: #00aefc;
}

.green {
  background-color: #3cc08e;
}

.track {
  background: #00aefc;
  height: 5px; /* You must set track height, usually smaller than thumb height */
}

.track-1 {
  background-color: #4b4d4e;
}

[prsh11]

what if I am using three sliders with different thumb colors, How do I set different colors of track according to the sub-class

trackClassName="track blue"

(sets track color to blue)

[kris-ellery]

You can use class modifiers and parent-child relationships via CSS.

In React, you set 3 sliders, each with its own CSS modifier class slider--{modifier}

export default function App() {
  return (
    <div>
      <ReactSlider
        className="slider slider--blue"
        thumbClassName="thumb"
        trackClassName="track"
        min={15}
        max={120}
        value={25}
        step={5}
      />
      <br />
      <ReactSlider
        className="slider slider--green"
        thumbClassName="thumb"
        trackClassName="track"
        min={15}
        max={120}
        value={25}
        step={5}
      />
      <br />
      <ReactSlider
        className="slider slider--red"
        thumbClassName="thumb"
        trackClassName="track"
        min={15}
        max={120}
        value={25}
        step={5}
      />
    </div>
  );
}

and in styles you can chain/nest selectors to target specific nodes

/* Shared styles */
.slider {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 20px;
  width: 500px;
}

.thumb {
  cursor: pointer;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

.track {
  height: 5px;
}

/* Blue styles */
.slider--blue .thumb {
  background-color: blue;
}

.slider--blue .track {
  background-color: blue;
}

.slider--blue .track-1 {
  background-color: gray;
}

/* Green styles */
.slider--green .thumb {
  background-color: green;
}

.slider--green .track {
  background-color: green;
}

.slider--green .track-1 {
  background-color: gray;
}

/* Red styles */
.slider--red .thumb {
  background-color: red;
}

.slider--red .track {
  background-color: red;
}

.slider--red .track-1 {
  background-color: gray;
}

If you really need to keep the color class on thumb and track elements, you can do this (altho not recommended):

.thumb.blue, .track.blue { background: blue; }
.thumb.green, .track.green { background: green; }
.thumb.red, .track.red { background: red; }
.track.blue-1, .track.green-1, .track.red-1 { background-color: gray; }