slider ui component for react
- support ie8,ie8+,chrome,firefox,safari
var React = require('react');
var ReactDOM = require('react-dom');
var Rcslider = require('rc-slider');
ReactDOM.render(<Rcslider />, container);| name | type | default | description |
|---|---|---|---|
| className | String | rc-slider | Additional css class for the root dom node |
| min | number | 0 | The minimum value of the slider |
| max | number | 100 | The maximum value of the slider |
| step | number | 1 | Value to be added or subtracted on each step the slider makes. Must be greater than zero. max - min should be evenly divisible by the step value. |
| range | boolean | false | Determines the type of slider. If range is `true`, two handles will be rendered in order to select a range. |
| defaultValue | number or [number, number] | 0 or [0, 0] | Set initial positions of handles. If range is `false`, the type of `defaultValue` should be `number`. Otherwise, `[number, number]` |
| value | number or [number, number] | Set current positions of handles. If range is `false`, the type of `defaultValue` should be `number`. Otherwise, `[number, number]` | |
| marks | array | [] | Mark every step for the slider, it will ignore the `step` parameter if it has been defined. Does not work with `range` |
| included | boolean | true | If the value is `true`, it means a continuous value interval, otherwise, it is a independent value. |
| defaultIndex | number | 0 | For step or marks slider, determines the initial position of the handle. Does not work with `range` |
| index | number | For step or marks slider, determines current position of the handle. Does not work with `range` | |
| disabled | boolean | false | If true the handles can't be moved. |
| tipTransitionName | string | '' | Set the animation for tooltip if it shows. |
| tipFormatter | func | Format the value of the tooltip if it shows. | |
| dots | bool | false | For linear slider, when the `step` value is greater than 1, you can set the `dots` to `true` if you want to render the slider bar with dots. |
npm install
npm start
http://localhost:8005/examples/
online example: http://react-component.github.io/slider/
http://localhost:8005/tests/runner.html?coverage
rc-slider is released under the MIT license.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent