Material-ui: [Slider] Add Range input

[isergey]

Hi!
I found slider, but I did not see how to make a from-to value selection. Does the material-ui support this behavior?
Thanks for the excellent library!

[treylon]

Are there any plans on implementing this feature in the near future?

[inkadnb]

I'm also interested in this feature. Range sliders are very useful as filter criteria.

[jdelafon]

Me too!
Although impractical, it is probably possible to get the same result by combining 2 simple sliders, changing their size/range dynamically in a way that is not noticeable by the user thanks to custom CSS.

Edit: I'd propose an implementation of that if only it was possible to get the new value from event onDragStop.

[smeijer]

I couldn't believe this component did not exists. Would be most welcome if it was available.

[rikur]

Please add a range support to slider.

[ghost]

For now you can forget it, to make it work properly someone would need separate the SliderHandle and the SliderBar from the current Slider implementation.. This is an one to one api, not one-to-many.. This would require a lot of work. So I guess, it's simpler to use a component which can do it already like this one: https://github.com/davidchin/react-input-range

[jdelafon]

I don't agree, and I almost made it. I only need onDragStop to return the event in the callback (#4926), and it's done. Make a component that contains 2 Slider components, superposed, each with a different callback prop, with the size and number of ticks of each depending on the value of the other (update only onDragStop).

[cesarho]

Is your implementation working? Is it going to be contributed to the material-ui core version?

[oallouch]

Any news on this ? Is it planned for "next" ?

[mbifulco]

I could also really use a this type of input. @jdelafon - what's the state of your control? Is it available for wider use?

[jdelafon]

Well #4926 is still open, and the related pull request not merged yet apparently. At the time I gave up on it because of that, and also simply because actually two separate sliders were better for my use-case.
But the idea is simple enough, I think. Superpose two single sliders and make the length and number of ticks of the first react on the value of the second (on drag stop), and conversely.
I still have a trace of it in an old commit somewhere. I could submit a prototype if the API now allows it.

[oallouch]

FYI, I use (and like) this one: https://github.com/react-component/slider
I particularly enjoy their "pushable" property.

[dav-ell]

I could really use this as well. The system I use does not easily support rc-slider, the slider mentioned by @oallouch.

Edit: looks like its in v1. Looking forward to that version.

[x5engine]

not good better have a properly set component than trying to hack around it

[jdelafon]

@meteorplus What are you calling "properly set"? "Not contributed by the community"?
The current state is that my request has been closed in favor of #4793 , so waiting for that one.

[AllanTAP]

Nothing on this yet?

[bhack]

rc-slider has a very nice feature set. Can we take inspiration from it?

[AllanTAP]

@bhack thank you for this tip! I've decided to use react-slider, and it's working just fine until now.

[adeelibr]

@oliviertassinari Since we have a slider, should this issue be closed?

[oliviertassinari]

@adeelibr we don't have the from to feature.

[Jaichand]

try this https://github.com/angular-slider/ng5-slider

[benneq]

I'd go for a more generic solution, without any additional constraints:

<Slider
  value={50}
  onChange={(value) => ... } // will contain the single value
/>

and:

<Slider
  multi={true}
  value={[10,20,100,100]}
  onChange={(value) => ... } // will contain the complete array of values
/>

Then it's possible to have multiple values, and it's up to the user / dev to apply constraints if they wish.

[ankithkonda]

Any update on this?

[cyberdude]

Wow. [phone]

[oliviertassinari]

@cyberdude Moving the Slider to the core and implementing range will be one of our top priorities after the release of Material-UI v4.

[niksajanjic]

I might be missing something, but I don't see why is this closed. In the documentation, there is no example of Slider as a form element which is exactly what this issue is about. There is only an example of a Slider with input, which is irrelevant in this case.

Furthermore, you can't pass inputRef nor inputProps to it to be able to connect it to something like react-hook-form easily. I can see input element inside slider, so it just seems like we're close but not there yet.

[oliviertassinari]

@niksajanjic Wrong issue, this one is about:

[niksajanjic]

Hm, I must be misreading something:

I found slider, but I did not see how to make a from-to value selection. Does the material-ui support this behavior?

It doesn't matter too much. Is there an issue about Slider as a form element or should I create one (wouldn't want to make a duplicate and I couldn't find any issue similar to what I'm asking)?

At the moment I'm just using Slider and hidden <input type="number" ref={register} />. When I change something on a slider I update input which is connected to my form. If I had the ability to pass inputRef to Slider and get the value from an input hidden inside Slider, that would be a much better solution.