rheostat

Rheostat is a www, mobile, and accessible slider component built with React

Rheostat

A mobile, tablet, desktop, and accessible slider for the web.

Rheostat demo

Install

npm install rheostat

Initialize

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.

import 'rheostat/initialize';

For example, the above import should go at the top of your application as you won’t be able to import rheostat with it.

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: PropTypes.shape({
    getValue: PropTypes.func,
    getPosition: PropTypes.func,
  })

Custom class name that will be applied to the root of Rheostat.

  className: PropTypes.string

Custom React component overrides for the handles, background, and the “progress” bar.

  background: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
  handle: PropTypes.oneOfType([PropTypes.func, PropTypes.string])
  progressBar: PropTypes.oneOfType([PropTypes.func, PropTypes.string])

The maximum and minimum possible values, by default 0 – 100.

  max: PropTypes.number
  min: PropTypes.number
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.oneOfType([PropTypes.func, PropTypes.string])
  pitPoints: PropTypes.arrayOf(PropTypes.number)

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.

If you need to perform custom logic to postprocess the handle position, getNextHandlePosition accepts 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: PropTypes.func
  onClick: PropTypes.func
  onKeyPress: PropTypes.func
  onSliderDragEnd: PropTypes.func
  onSliderDragMove: PropTypes.func
  onSliderDragStart: PropTypes.func
  onValuesUpdated: PropTypes.func
  getNextHandlePosition: PropTypes.func
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: PropTypes.bool
  snapPoints: PropTypes.arrayOf(PropTypes.number)

The values, by default 0 and 100.

  values: PropTypes.arrayOf(PropTypes.number)

You can disable the slider to prevent the user from moving it.

  disabled: PropTypes.bool

Usage

Important: Make sure to include the css file or feel free to create your own.

  • Simple.
import Rheostat from 'rheostat';

ReactDOM.render(<Rheostat />, document.getElementById('slider-root'));
  • A slider with a multiple handles.
import Rheostat from 'rheostat';

ReactDOM.render((
  <Rheostat
    min={1}
    max={100}
    values={[1, 100]}
  />
), document.getElementById('slider-root'))

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

shares