gre / multi-slider

React component for multiple values slider (allocate values)

multi-slider

React component for multiple values slider (allocate values).

Develop and run example

npm install

npm run example

multi-slider's Issues

How to resize?

Is there any way of changing the size of the slider with width and height not proportionally? I want a thin but long slider and I couldn't manage to resize your component to fit my needs with CSS only, is there any undocumented size property? Something else I could use to achieve this?

renderHandle exposed to customize handle rendering

Silder's handle animation does not work wiht ES6

When dragging the handler the values change, but the handler does not move.
This may be due to getDOMNode being deprecated in React's plain JS classes.

Gradient as color of the line and circle customization

Hey, I really like your work, and would like to ask some,
Could I add a gradient such as linear-gradient(-90deg, #60ccae, #c6e152) to the colors to have it as the color of the line?
or maybe to add the gradient as a variable?
Also Is it possible to change the circles to for example a straight horizontal line?

Thank you

Feature-Suggestions

Hi,

I really like your component. It's a really easy to use true multi slider.

I have some things on my mind which I think could take it up a notch:

1. Fixed stepping
Setting a fixed stepping to only allow value changes restricted to that stepping. To switch between 0, 10, 20, ... and so on

2. Values above/below handle
Add an option to display the current values above/below the corresponding handle. Don't know if this is possible with SVG.

3. Enable standard range slider behaviour
It would be great to use this component as a standard range slider too. By "standard" I mean an optional mode where the slider is fixed to 2 handles and 2 values, highlighting only the area between them and returning the absolute value of their position.

Sadly I'm not that of an expert that I could provide much of a help for any of these suggestions.

Best regards
tpinne

renderTrack exposed to customize track rendering

Documentation

I love your component. I've used it here: https://editbspline.github.io/.

I think your project has a lack of good documentation. The examples don't clear up everything, which makes it less accessible. I had to read the source to figure out the props for MultiSlider, including trackSize, which I confused as the length and not width of the line. This component needs full documentation, which can be placed in the README.md page of this project.

error when trying to browserify

I'm trying to browserify index.js and got this error

$ browserify src/index.js > bundle.js

Error: Cannot find module 'react/lib/invariant' from '/Users/user1/Documents/Code/multi-slider/node_modules/uncontrollable/lib'
at /usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:46:17
at process (/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:173:43)
at ondir (/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:188:17)
at load (/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:69:43)
at onex (/usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:92:31)
at /usr/local/lib/node_modules/browserify/node_modules/resolve/lib/async.js:22:47
at Object.oncomplete (fs.js:107:15)

Am I missing something?

add step prop

to do a global stepping on the slider.

`onChange` only when user lifts handle

I want to implement a feature where the parent component's onChange callback is invoked only when the user lifts the mouse from the handle. This makes computationally expensive renders stop, when the user doesn't need them.

Update needed for react 16

I'm using MultiSlider on my project, I have those errors on the console :

Just to let you know.

add renderTrackLabel prop to render a label below/inside/above the track

I imagine the rendering could be above/below or even inside the track itself (the number inside the rectangle). so many possibilities but basically user could do: renderTrackLabel={({ value, editing, ... }) => editing ? <text y={10}>{value}</text> : null} (x would be set by a parent <g> but as you would be probably centered, you would have to offset y by a given amount)

Tooltip

Is possible to show a tooltip with the current values?