search

whoisandy / react-rangeslider

A lightweight responsive react range slider component.A fast & lightweight react component as a drop in replacement for HTML5 input range slider element.
https://whoisandy.github.io/react-rangeslider/
MIT License
641 stars 235 forks source link

range slider with range selection #18

Open rdewolff opened 8 years ago

rdewolff commented 8 years ago

Have you planned to add the possibility to select a range within a range?

So for example, if I have a slider with dating range, I could move (a) and (b) as illustrated below :

1900          (a)         (b)                                2000
|-------------<>----------<>------------------------------------|

That would be great!

stepankuzmin commented 8 years ago

That would be great! This functionality is implemented in https://github.com/mpowaga/react-slider and https://github.com/davidchin/react-input-range

misterfresh commented 7 years ago

I needed that feature for a project so I added it.

The main problem is that in the current implementation of react-rangeslider the "handle" is very coupled with the "slider". You need to put the "handle" in a separate class so that you can add more of those easily.

Here is my version in case anyone is interested : https://gist.github.com/misterfresh/27aa93a7c85559d35b9d97f17fe0f10d