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(, 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

$3

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

$3

An alternative change handler which only sends the argument at the end of the mouse drag

$3

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