Suggested improvements about react-slider HOT 5 CLOSED

I'm thinking about adding two new components to be used as a children of slider. One will be just a handle and a second to fill the space between handles. So the user can easily create range slider with two handles or even more. Something like this:

<Slider>
  <Handle min={0} max={100} />
  <span style={{ backgroundColor: 'red' }} />
  <Handle min={0} max={100} />
</Slider>

You can use div but then you loose the ability to show the current value.

Default handle component is a good idea. Feel free to add it.

from react-slider.

I implemented this in my project, in order to use html elements as handles. If props.children is a component, then it assigns props to it. There might be a better way to check if object is a component, but this works.

The default handle assignment can also be handled here.

var userHandle = this.props.children;
    if(userHandle){
      if(userHandle.props){ // check if child is a component
        userHandle.props[this.props.valuePropName] = this.state.value;
      }
    } else {
      // use default handle
    }

I do like the idea of a fillable bar, but multi-handle functionality would be better as a separate component, imo.

from react-slider.

I don't really know where else to put this, so it goes here.

I've built a multi slider component based on your slider (repository, demo). It can have multiple handles, draws bars between them, provides default handles if the component has no children and prevents text selection while dragging.

I tried to make it closer to the <input type="range" /> element. This means it can be used either as a "controlled" component by providing a value or more like the original slider by providing a defaultValue and using the internal state. This also removes the need to "inject" the current slider value into the props of the children which is a anti pattern in my opinion.

I'd be happy to submit a pull request, but since everything changed quite significantly and also breaks things, I'd rather ask for your opinion first.

from react-slider.

@cell303 That look really great. Bit different than my first ideas but I like similarity to range input.

Feel free to submit PR. This component isn't set in stone yet so I don't mind to break things.

from react-slider.

I think this is all implemented now

from react-slider.