Follow and add value on Slider

[sghall]

Follow and add value on Slider

[sghall]

Hey there. Hmmmm...interesting question. I was messing around with this a bit. If it's a small number of discrete values you could do something like this.

https://codesandbox.io/s/rwjn53mkmn

You wouldn't show the grey on the tick boxes obviously. That's just there to show you what's going on. Needs some work.

Not sure if that's what you were looking for.

[PeterMK85]

Hey @sghall

Thanks for the quick reply.

Yep its getting closer, but for my use case I have a large amount of values (for ex 500 or more), and a user should see each and every value on hover.
(I just presume, but the Ticks approach won't be the best solution for me)

So probably a Rail component on hover would be a better start for this no? (with passing the actual mouse position value to the onMouseEnter function)

WDYT?

[sghall]

I see. I think one way to support this is to give you access to a function that uses the scale that translates from the event location to the step. You can see how it gets used here...

react-compound-slider/src/Slider/Slider.js

Line 275 in 2e34a25

updateValue = this.pixelToStep.getValue(vertical ? e.clientY : e.pageX)

You could pass down the scale and expose a function in the Tracks and Rail components that would allow you to get the step value by passing in the x or y value (depending on if it's vertical or not). I wouldn't allow the user to actually get the scale itself.

One wrinkle here is I check the dimensions before using it in case the browser has resized. So need to think about that.

react-compound-slider/src/Slider/Slider.js

Line 265 in 2e34a25

this.pixelToStep.setDomain(

You interested in doing a PR on this?