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 value and ratio (percentage of bar filled)
• the id prop 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