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 |
{ number: string } or{ number: { style, label }}
|
{} |
Mark on the slider. The key determines the position, and the value determines what will show. If you want to set the style of a specific mark point, the value should be an object which contains style and label properties. |
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 or Number |
false |
Determines the type of slider. If range is true , two handles will be rendered in order to select a range. If range is a number, multiple handles will be rendered (number + 1). Using range={true} is equivalent to range={1} . |
allowCross |
Boolean |
true |
When range is true , allowCross could be set as true to allow those handles to cross. |
pushable |
Boolean or Number |
true |
When range is true , pushable could be set as true to allow pushing of surrounding handles when moving an handle. When set to a number, the number will be the minimum ensured distance between handles. Example:
|
vertical |
Boolean |
false |
If vertical is true , the slider will be vertical. |
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, ...]
|
handle |
Component |
|
Provide a custom Handle to use in the slider by passing a component. This component will have a value and offset props used to define custom styling/content. |
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. When given a function, the first argument will be the value and the second will be the index of the slider handle. |
dots |
Boolean |
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. |