Rheostat
A mobile, tablet, desktop, and accessible slider for the web.
Install
npm install rheostat
Props
The algorithm, by default linear
, the slider will use. Feel free to write
your own as long as it conforms to the shape.
algorithm: PropTypesshape getValue: PropTypesfunc getPosition: PropTypesfunc
Custom class name that will be applied to the root of Rheostat.
className: PropTypesstring
Custom React component overrides for both the handles, and the "progress" bar.
handle: PropTypes progressBar: PropTypes
The maximum and minimum possible values, by default 0 - 100.
max: PropTypesnumber min: PropTypesnumber
pitComponent
is a custom React component for rendering "pits" across the bar.
pitPoints
is the set of points at which it will render a pit. Points are an array
of values
on the slider.
pitComponent: PropTypes pitPoints: PropTypes
NOTE: onChange
is called whenever the value is changed and committed. This happens at the end of
a drag, keypress, or click event. onChange
is recommended when you wish to persist the values.
onValuesUpdated
is a convenience event that is triggered while the value is being actively
changed. This includes dragging, click, or keypress. onValuesUpdated
is recommended if you need
to work with the values before they're committed.
onChange: PropTypesfunc onClick: PropTypesfunc onKeyPress: PropTypesfunc onSliderDragEnd: PropTypesfunc onSliderDragMove: PropTypesfunc onSliderDragStart: PropTypesfunc onValuesUpdated: PropTypesfunc
snap
is a boolean which controls the slider's snapping behavior.
snapPoints
is an array of values
on the slider where the slider should snap to.
If snap
is set to true and no snapPoints
are set then the slider is snapped into an absolute
position. For example, on a scale of 1-10 if the slider is let go at the 54% mark it'll pick the
value 5 and snap to 50%.
snap: PropTypesbool snapPoints: PropTypes
The values, by default 0 and 100.
values: PropTypes
You can disable the slider to prevent the user from moving it.
disabled: PropTypesbool
Usage
Important: Make sure to include the css file or feel free to create your own.
- Simple.
; ReactDOM;
- A slider with a multiple handles.
; ReactDOM;
Live Playground
For more examples you can check out the storybook.
- Clone this repo on your machine.
npm install
npm run storybook
- Visit
http://localhost:9001/
.