Reach-ui: Add three SliderTrackHighlight inside

[gdsrosa]

❓Question

I wanna know if it is possible to put 3 highlight sliders inside the SliderTrack, and at the of day the slider should look like this:

[chaance]

You should be able to nest anything you want inside of a slider track, you just might need to write some logic to get that to work the way you want. What kind of measurement does that slider represent exactly?

[gdsrosa]

Nice!
Alright, so the measurement represents a monetary value, so the width of these divs inside the slider track has to change when I move the slider handle from left to right or vice versa.

[chaance]

So this is untested, but if you control the value I imagine you could do something along these lines:

function MoneySlider({ value, onChange, min, max }) {
  // assumes the shorter bar is 50% of the larger bar, adjust the math accordingly
  let smallTrackPercent = ((value / 2 - min) * 100) / (max - min);
  return (
    <SliderInput>
      <SliderTrack>
        <div style={{ position: `absolute`, left: 0, height: `100%`, width: `${smallTrackPercent}%` }} />
        <SliderTrackHighlight />
        <SliderHandle />
      </SliderTrack>
    </SliderInput>
  )
}

Again, that may need some tweaking but start there and let me know if you run into any limitations.