react-simple-range
A simple React slider component for inputting a number value within a range.
Install
npm install react-simple-range --save
Usage
Import React and this component using your chosen module bundler:
import React from 'react';
import ReactDOM from 'react-dom';
import ReactSimpleRange from 'react-simple-range';
const rootElement = document.getElementById('app');
ReactDOM.render(<ReactSimpleRange />, rootElement);
Props
| Name | Type | Default | Description |
|---|---|---|---|
| min | number | 0 | Minimum slider value |
| max | number | 100 | Maximum slider value |
| step | number | 1 | Number inc/decremented when slider value is changed. The range of the slider (max - min) should be evenly divisible by this |
| id | string | null |
Identifier that is passed to the onChange handler (see below) |
| onChange | function | NOOP | Function to be called when the slider value changes - your slider will have no effect without this! See below for more information |
| onChangeComplete | function | NOOP | Function to be called when user interaction finishes, sends the same values as the onChange handler, the only difference is they get sent when the interaction has ended |
| defaultValue | number | 0 | Set initial value of slider |
| vertical | boolean | false |
Set slider to vertical when true |
| verticalSliderHeight | string | 100px |
Default slider height if vertical. If your slider already has a fixed height wrapper, just set this to 100% and the slider will fill the space |
| eventWrapperPadding | number | 8 | Px value to add padding to the wrapper to make small sliders easier to interact with |
| label | boolean | false |
If true, adds a label displaying the slider's value when interacted with |
| disableThumb | boolean | false |
Disables the thumb when true |
| disableTrack | boolean | false |
Disables the track when true |
| sliderSize | number | 4 | Px height of slider if horizontal, width if vertical |
| thumbSize | number | sliderSize * 2 |
Height and width of thumb in px |
| sliderColor | string | #9E9E9E |
Color of slider |
| trackColor | string | #03A9F4 |
Color of track and label |
| thumbColor | string | #fff |
Color of thumb |
| customThumb | element | undefined |
Pass in a single React element to use as your thumb, replacing the default |
Change handlers
onChange
The onChange handler receives the following arguments:
- an object containing the current slider
valueandratio(percentage of bar filled) - the
idprop of the slider
onChangeComplete
An alternative change handler which only sends the argument at the end of the mouse drag
Contributing
PRs are welcome. Submit issues for any bugs or feature requests.
Commands for local dev
| Name | Effect |
|---|---|
npm start |
Runs react-styleguidist, serving examples at http://localhost:6060/ |
npm run test |
Runs tests with jest |
npm run test:watch |
Runs tests in watch mode |