Ability to style min/max slider handles differently

[jedrichards]

Would you be open to a PR that added some additional classnames onto the slider handles that enabled the min/max handles to be styled differently?

E.g., at https://github.com/davidchin/react-input-range/blob/master/src/js/input-range/slider.jsx#L258

className={this.props.classNames.slider + ' ' + this.props.classNames.minSlider}

We need this feature for a commercial project, so could cook up a PR quite swiftly if you're open to it.

[cedricve]

You can do it by using CSS with the first-of-type tag.

.input-range__track .input-range__slider-container:first-of-type .input-range__slider{

[jedrichards]

Ah thanks. Yes, we're doing a similar workaround at the moment.

It would be easier/better to have a single dedicated classname though, since complex selectors and pseudo-classes like :first-of-type etc. are brittle and not resilient to structural DOM changes.

Would be happy to put together a PR. Or else feel free to close, since there are workarounds.

[cedricve]

True, if we have time to implement it. But I can live with the first-of-type solution for my specific situation.

[guncha]

I think passing custom Label and Track components into the main component would accomplish this and any other customization that the users might dream of. I'd like the handles to show the value only when it's being dragged, but, alas, it doesn't seem to be possible currently.

[jamesnewman12]

i want to be able to use slider one in multiple instances. but when I do so, each slider moves at the same time.

[tomasztomys]

It cannot with with first of type, because last clicked handle is a last children.