Slider
Props
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 |
Examples
Asymetric
Change handler
Append values
Best Practices
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 a slider when page real estate is not an issue and when visualizing the range helps users make more informed choices.
- The slider should have a range of up to 100 values.
- If the range is short (i.e., 5 values or less) or large (i.e., over 50 values), consider using a numeric input instead.
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.
Labeling
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".
Track and Markers
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.
Feedback and Validation
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.
Related Components
Numeric input - When setting a precise value.