Add support for optional marks (a styled element at each step) about react-range

[luisrudge]

That's a nice idea! I'll give it a shot during the weekend. Thanks for the tip

[tajo]

@tajo but I assume the lib already knows where the steps are, that's how you can 'stick' the thumb to the step correct position. Consumers of the library would have to add code to calculate where the steps should be based on width, size etc..

Yea, the renderTrack could pass the positions through a prop. And there could be some additional getTrackBackgroundStep utility function using those steps to generate that background.

Do you want to give it a try?

[tajo]

Could you describe it more?

[luisrudge]

When I use the step prop, I'd like to be able to customize how the step looks like (probably with a renderStep method to keep the api consistent.

Example from material-ui:

What I actually want to achieve:

[tajo]

There is no "out of the box" support but you have a complete access to the "track element". It comes with the getTrackBackground utility that generates a linear gradient to set different background "before" and "after". You could write your own function to also add steps. Or introduce steps as a second background / layer. Really up to you at this point.

[luisrudge]

@tajo but I assume the lib already knows where the steps are, that's how you can 'stick' the thumb to the step correct position. Consumers of the library would have to add code to calculate where the steps should be based on width, size etc..

[hungle1220]

@tajo but I assume the lib already knows where the steps are, that's how you can 'stick' the thumb to the step correct position. Consumers of the library would have to add code to calculate where the steps should be based on width, size etc..

Yea, the renderTrack could pass the positions through a prop. And there could be some additional getTrackBackgroundStep utility function using those steps to generate that background.

Do you want to give it a try?

@luisrudge what about result bro :D

[giacomoalonzi]

this feature has been implemented? I'm trying to use this library to achieve the same result, but as you can see I'm not able to align dots with slider movements.

Thanks

[tajo]

this feature has been implemented

It's been not.

[jameschetwood]

You can also do this by setting one of the colors in getTrackBackground to "transparent", and by having the linear gradient in a containing div.

[ianninirojas]

Hi, was anyone able to style the step break?

[tajo]

I'm working on this now.