React Range Slider
A tooltip component for react.
Screenshot
Live demo
Click here: https://ecmadao.github.io/rc-range-slider
Install
$ npm i rc-range-slider --save
Build config
- Webpack 3.x config example
// webpack config file // loadersconst postcssLoader = loader: 'postcss-loader' options: config: path: path ;const cssModulesLoader = ExtractTextPlugin; const webpackConfig = module: rules: test: /\.css$/ include: /rc-range-slider|rc-tipso/ loaders: cssModulesLoader ;
- Webpack 1.x config example
const webpackConfig = module: loaders: test: /\.css$/ include: /rc-range-slider|rc-tipso/ loaders: cssLoaders { return };
Usage
; // ... { return <Slider value=15 35 minRange=5/> }
Example
Click here to see tipso usage examples.
Api
name | type | default | description |
---|---|---|---|
tipFormatter | PropTypes.func |
null |
A function to custom tooltip value. Should return a string or DOM. |
min | PropTypes.number |
0 |
Slider min value. |
max | PropTypes.number |
100 |
Slider max value. |
value | PropTypes.number or PropTypes.array |
10 |
When it be a number, Slider will render single range select. Or pass a array to support multi range select. |
minRange | PropTypes.number |
1 |
The minimum range value between two pickers. |
jump | PropTypes.bool |
false |
When you are dragging the picker, jump decide to update the value by using jumpRange . Besides, section points will rendered by sectionRange . |
jumpRange | PropTypes.number |
1 |
The minimum value to change, should work with jump props. |
sectionRange | PropTypes.number or PropTypes.array |
null |
The section range to render the section point. |
clickable | PropTypes.bool |
false |
Whether the row can be clicked or not. |
updateWhenDrag | PropTypes.bool |
false |
In default config, you will receive onChange callback after drag finished. But by setting updateWhenDrag to true , you can get callback as soon as value changed when dragging. |
onChange | PropTypes.func |
() => {} |
The callback when value changed. |
Custom style
name | type | default | description |
---|---|---|---|
className | PropTypes.string |
'' |
Custom className to change UI. |
draggerClass | PropTypes.string |
'' |
Custom dragger style |
tipsoClass | PropTypes.string |
'' |
Custom tip style |
pathwayClass | PropTypes.string |
'' |
Custom pathway style |
color | PropTypes.string |
green |
Theme color. Support green , dark , blue , red , gray |
useTipso | PropTypes.bool |
true |
Whether use tip or not when hover picker. |
Dev
$ git clone git@github.com:ecmadao/rc-range-slider.git$ cd rc-range-slider$ npm i$ npm run storybook
License
Released under MIT License