Material-ui: [Slider] Reverse Slider

[damir-sirola]

This is actually duplicate of #763 which was closed without explanation
Business use case is when you want the values in the upper range of slider to be selected.
Something like this https://jqueryui.com/slider/#rangemax
I didn't find a way to override this through styling because the rail element is rendered over the whole width of the slider and track element is rendered over it making it impossible to specify opacity on it.

• [ ] I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Enable passing prop to slider (or make component style-able) to accommodate having darker part on the right side of the selection

Examples 🌈

https://jqueryui.com/slider/#rangemax

Motivation 🔦

User can select the minimum interest rate to receive notification for. Interest rates go from 2-10% and you want to receive notification if the interest rate is in the range from slider value up to 10

[oliviertassinari]

The range API of jQuery looks great. I think that we could implement it. We already have one part of the problem raised in #16631 (false)

range?: false | 'min' | 'max'; // (min as the current default)

[oliviertassinari]

@damir-sirola Would it be a problem that you are interested in solving in the core of the library?

[mbrookes]

range risks being confused as having something to do with the range slider. Perhaps:

track?: false | 'before' | 'after'; // ('before' as the current default)`

?

[oliviertassinari]

range risks being confused as having something to do with the range slider.

@mbrookes This is very true. No objection with the proposed alternative 👍.

[damir-sirola]

I could give it a try. Any idea how the component should behave with range slider? Should it even be enabled then?

[oliviertassinari]

@damir-sirola I think that the prop should be ignored with a range slider. But then, I think that it means that we need to rethink the API.

[damir-sirola]

Agreed, I don't think it makes sense for range to track outside area

[oliviertassinari]

Agreed, I don't think it makes sense for range to track outside area

Hum, maybe it does. What about the use case of a pass-band and stop-band filters?

[damir-sirola]

Hmm, we'll need a better name for the prop then 🙂

[oliviertassinari]

Back to our drawing board.

[mbrookes]

track?: false | 'normal' | 'inverted'; 

?

[mark-tate]

Hello

I'll push up a PR which might help with this.

I've added
track?: 'normal' | 'inverted'
which enables us to reverse the styling of the rail/track/marks.
I've used axisProps to return a different offset/leap, this solves any opacity issues.

With regards, #16631 (false) to only highlight the current mark.
You could not use this with 'inverted' option, so I assume this should be a separate prop ?

[oliviertassinari]

@slipmat The current proposal is as follows. Does it answer your question?

<Slider value={40} track="normal"

<Slider value={40} track="inverted"

<Slider value={40} track={false}

<Slider value={[40, 50]} track="normal"

<Slider value={[40, 50]} track="inverted"

<Slider value={[40, 50]} track={false}