Name | Type | Default | Description |
---|---|---|---|
id required | string | The unique identifier of the Slider | |
activeDotStyle | CSSProperties | ||
appendValue | boolean | AppendedValueSide | false | Whether to display a value around the slider (true or AppendedValueSide.both) or only on one side (AppendedValueSide.left, AppendedValueSide.right) |
appendValueFormatter | (value: number, side?: AppendedValueSide.left | AppendedValueSide.right) => ReactNode | Function that receives the current value and a side and renders a component the specified side of the slider
| |
ariaLabelForHandle | string | ||
ariaLabelledByForHandle | string | ||
ariaValueTextFormatterForHandle | (value: number) => string | ||
autoFocus | boolean | ||
className | string | ||
crossingPoint | number | Crossing point, if the value is lower than that the filling will be on the right and if it's higher, it will be on the left | |
customTooltip | (value: any) => Element | A callback function that is used to display information when the user is changing the value
| |
defaultValue | number | ||
disabled | boolean | ||
dots | boolean | ||
dotStyle | CSSProperties | ||
draggableTrack | boolean | ||
handle | (props: { className: string; prefixCls?: string; vertical?: boolean; offset: number; value: number; dragging?: boolean; disabled?: boolean; min?: number; max?: number; reverse?: boolean; index: number; tabIndex?: number; ... 4 more ...; ref?: Ref<...>; }) => ReactElement<...> | ||
handleStyle | CSSProperties | ||
hasTooltip | boolean | Whether to display a tooltip | |
included | boolean | ||
initialValue | number | The initial value | |
marks | Record<number, ReactNode | { style?: CSSProperties; label?: string; }> | ||
max | number | ||
maximumTrackStyle | CSSProperties | ||
min | number | ||
minimumTrackStyle | CSSProperties | ||
onAfterChange | (value: number) => void | ||
onBeforeChange | (value: number) => void | ||
onBlur | (e: FocusEvent<HTMLDivElement, Element>) => void | ||
onChange | (rangeOutputValue: number) => any | A callback function executed when the slider moves
| |
onFocus | (e: FocusEvent<HTMLDivElement, Element>) => void | ||
prefixCls | string | ||
railStyle | CSSProperties | ||
reverse | boolean | ||
startPoint | number | ||
step | number | ||
style | CSSProperties | ||
tooltipStyle | Partial<any> | Overrides for the style of the tooltip | |
trackStyle | CSSProperties | ||
value | number | ||
vertical | boolean | ||
tabIndex deprecated | number | do not use |
A slider is appropriate when providing an exact value is not important. Sliders typically allow users to adjust the intensity of an effect, such as a percentage of opacity, or when an approximate value is sufficient, for example when choosing a flight departure time. It helps visualize a range of allowed values. Consider the following:
Use sliders carefully, as they can be difficult to control on smaller devices or when the range is very large but the space is limited.
Keep marker labels short (i.e., ideally a single word).
Provide a short, descriptive title without action verbs. For example, write "Thumbnail size" rather than "Select the size of the thumbnail".
The track represents the value range. It should be divided into equal steps using markers.
When exposing a numeric value is unimportant, name markers using adjectives. For instance, use “small” and “big” when making users choose the size of a thumbnail.
When using numeric values to label markers, display the unit to provide context. For instance, show "90%" when making users select a percentage.
Use plus and minus signs when the range allows negative values.
A slider always has a default value. Consider showing the most frequently selected value as the default. If no value particularly stands out, consider using a neutral value or the median. Ideally, the default value should correspond to a marker.
If users can select a numeric value between two markers, display this value above the handle or next to the slider. This allows users to refer to what they selected.
Numeric input - When setting a precise value.