1.0.4 • Published 5 years ago
rc-range-slider v1.0.4
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
// loaders
const postcssLoader = {
loader: 'postcss-loader',
options: {
config: {
path: path.join(__dirname, 'postcss.config.js')
}
}
};
const cssModulesLoader = ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader',
options: {
modules: true,
sourceMaps: true,
importLoaders: 1,
localIdentName: '[name]__[local]___[hash:base64:5]'
}
},
postcssLoader
],
});
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
}
]
},
postcss: () => {
return [
require('postcss-cssnext')
]
}
};
Usage
import Slider from 'rc-range-slider';
// ...
render() {
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
1.0.4
5 years ago
1.0.3
6 years ago
1.0.2
6 years ago
1.0.1
6 years ago
1.0.0
6 years ago
0.2.4
6 years ago
0.2.3
6 years ago
0.2.2
6 years ago
0.2.1
6 years ago
0.2.0
6 years ago
0.1.0
6 years ago
0.0.14
7 years ago
0.0.13
7 years ago
0.0.12
7 years ago
0.0.11
7 years ago
0.0.10
7 years ago
0.0.9
7 years ago
0.0.8
7 years ago
0.0.7
7 years ago
0.0.6
7 years ago
0.0.5
7 years ago
0.0.4
7 years ago
0.0.3
7 years ago