A mobile, tablet, desktop, and accessible slider for the web.
npm install rheostat
As of v3.0.0, the
rheostat project relies on
react-with-styles. If you want to continue using CSS stylesheets and classes, there is a little bit of extra set-up required to get things going. As such, you need to use to use
rheostat/initialize to set up class names on your components.
For example, the above import should go at the top of your application as you won't be able to import
rheostat with it.
The algorithm, by default
linear, the slider will use. Feel free to write
your own as long as it conforms to the shape.
algorithm: PropTypesshapegetValue: PropTypesfuncgetPosition: PropTypesfunc
Custom class name that will be applied to the root of Rheostat.
Custom React component overrides for the handles, background, and the "progress" bar.
background: PropTypeshandle: PropTypesprogressBar: PropTypes
The maximum and minimum possible values, by default 0 - 100.
max: PropTypesnumbermin: 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
values on the slider.
pitComponent: PropTypespitPoints: PropTypes
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.
If you need to perform custom logic to postprocess the handle position,
a callback of the form
(handleIdx: int, percentPosition: float) => float. Return the updated
handle position. This is useful if you need to customize ranges within a single slider.
onChange: PropTypesfunconClick: PropTypesfunconKeyPress: PropTypesfunconSliderDragEnd: PropTypesfunconSliderDragMove: PropTypesfunconSliderDragStart: PropTypesfunconValuesUpdated: PropTypesfuncgetNextHandlePosition: 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.
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: PropTypesboolsnapPoints: PropTypes
The values, by default 0 and 100.
You can disable the slider to prevent the user from moving it.
Important: Make sure to include the css file or feel free to create your own.
- A slider with a multiple handles.
rheostat/initialize script actually relies on react-with-styles-interface-css under the hood. If you are interested in a different solution for styling in your project, you can do your own initialization of a another interface. At Airbnb, for instance, we rely on Aphrodite under the hood and therefore use the Aphrodite interface for
react-with-styles. If you want to do the same, you would use the following pattern:
The above code has to be run before any
rheostat component is imported. Otherwise, you will get an error. Also note that if you register any custom interface manually, you must also manually register a theme.
rheostat also now supports a different way to theme. You can see the default theme values in this file and you would override them in the following manner:
The above code would make the default progress bar red, instead of light blue. Note that you must register an interface if you manually register a theme. One will not work without the other.
A note on using
The default interface that
rheostat ships with is the CSS interface. If you want to use this interface along with the theme registration method, you will need to rebuild the core
rheostat.css file. We do not currently expose a utility method to build this file, but you can follow along with the code in https://github.com/airbnb/rheostat/blob/master/scripts/buildCSS.js to build your own custom themed CSS file.
rheostat now supports automatic RTL rendering through
For more examples you can check out the storybook.
- Clone this repo on your machine.
npm run storybook