meraki-slider
meraki's fork of rc-slider, a react slider component
Feature
- support ie8,ie8+,chrome,firefox,safari
Keyboard
install
Usage
var React = require('react');
var ReactDOM = require('react-dom');
var Merakislider = require('meraki-slider');
ReactDOM.render(<Merakislider />, container);
props
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 |
marks | object {number: string} | {} | Mark on the slider. The key determines the position, and the value determines what will show. |
step | number or `null` | 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. When `marks` is not an empty object, `step` can be set to `null`, to make marks as steps. |
range | boolean | false | Determines the type of slider. If range is `true`, two handles will be rendered in order to select a range. |
allowCross | boolean | true | When `range` is `true`, `allowCross` could be set as `true` to allow those two handles cross. |
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]` |
included | boolean | true | If the value is `true`, it means a continuous value interval, otherwise, it is a independent value. |
disabled | boolean | false | If `true`, handles can't be moved. |
tipTransitionName | string | '' | Set the animation for tooltip if it shows. |
tipFormatter | function or `null` | | Format the value of the tooltip if it shows. If `null` the tooltip will always be hidden. |
dots | bool | false | When the `step` value is greater than 1, you can set the `dots` to `true` if you want to render the slider with dots. |
onChange | function | NOOP | `onChange` will be triggered while the value of Slider changing. |
onAfterChange | function | NOOP | `onAfterChange` will be triggered when `ontouchend` or `onmouseup` is triggered. |
reverseSlide | function | NOOP | reverseSlide with tether a slider with a range on the right |
Development
npm install
npm start
License
meraki-slider is released under the MIT license.