A simple React slider component for inputting a number value within a range.
nb: builds post v1.2.1 should be fairly stable, but releases are being left marked as pre-release until test coverage is improved
- For local examples check out the Development section below
- Or view examples online here
npm install react-simple-range --save
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);
Clone the repo then run npm start in the cloned directory to start webpack-dev-server and serve the examples.
Note: The examples import the babel-polyfill for compatibility in development, but the component itself doesn't
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
onChange | function | NOOP | Function to be called when the slider value changes - your slider will have no effect without this!
value | number | props.defaultValue | Set current value of slider
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
| Name | Effect |
|---|---|
npm start |
Starts a webpack-dev-server, currently serves the examples/ directory to http://localhost:8080/ |
npm run test |
Runs tests with mocha |
npm run test:watch |
Runs tests in watch mode with mocha --watch |
- Better test coverage
- Submit an issue to add to this list