https://github.com/ecmadao/rc-range-slider
A light, pure js range slider component for react
https://github.com/ecmadao/rc-range-slider
range-slider range-slider-component react react-components slider
Last synced: about 1 month ago
JSON representation
A light, pure js range slider component for react
- Host: GitHub
- URL: https://github.com/ecmadao/rc-range-slider
- Owner: ecmadao
- License: mit
- Created: 2017-04-15T07:20:52.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-07-12T04:04:06.000Z (almost 3 years ago)
- Last Synced: 2025-04-11T00:12:02.971Z (about 1 month ago)
- Topics: range-slider, range-slider-component, react, react-components, slider
- Language: JavaScript
- Homepage: https://ecmadao.github.io/rc-range-slider
- Size: 799 KB
- Stars: 13
- Watchers: 2
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Range Slider
[](https://badge.fury.io/js/rc-range-slider) [](http://standardjs.com) [](https://www.npmjs.com/package/rc-range-slider) [](https://raw.githubusercontent.com/ecmadao/rc-range-slider/master/LICENSE)
[](https://nodei.co/npm/rc-range-slider)
A tooltip component for react.
## Screenshot
## Live demo
Click here: [https://ecmadao.github.io/rc-range-slider](https://ecmadao.github.io/rc-range-slider)
## Install
```bash
$ npm i rc-range-slider --save
```
### Build config
- Webpack 3.x config example
```javascript
// 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
```javascript
const webpackConfig = {
module: {
loaders: [
{
test: /\.css$/,
include: /rc-range-slider|rc-tipso/,
loaders: cssLoaders
}
]
},
postcss: () => {
return [
require('postcss-cssnext')
]
}
};
```
## Usage
```javascript
import Slider from 'rc-range-slider';
// ...
render() {
return (
)
}
```
## Example
Click [here](./examples/SliderWrapper.jsx) 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
```bash
$ git clone [email protected]:ecmadao/rc-range-slider.git
$ cd rc-range-slider
$ npm i
$ npm run storybook
```
## License
Released under MIT License