Form

Slider

A slider offers a quick and visual way for users to select a value within a given range.

View source

Props

NameTypeDefaultDescription
idrequiredstring
The unique identifier of the Slider
activeDotStyleCSSProperties
appendValueboolean | AppendedValueSidefalse
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
  • valuethe current value of the slider
  • sidea value of AppendedValueSide
ariaLabelForHandlestring
ariaLabelledByForHandlestring
ariaValueTextFormatterForHandle(value: number) => string
autoFocusboolean
classNamestring
crossingPointnumber
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
  • valuethe current value
defaultValuenumber
disabledboolean
dotsboolean
dotStyleCSSProperties
draggableTrackboolean
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<...>
handleStyleCSSProperties
hasTooltipboolean
Whether to display a tooltip
includedboolean
initialValuenumber
The initial value
marksRecord<number, ReactNode | { style?: CSSProperties; label?: string; }>
maxnumber
maximumTrackStyleCSSProperties
minnumber
minimumTrackStyleCSSProperties
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
  • rangeOutputValuethe current value
onFocus(e: FocusEvent<HTMLDivElement, Element>) => void
prefixClsstring
railStyleCSSProperties
reverseboolean
startPointnumber
stepnumber
styleCSSProperties
tooltipStylePartial<any>
Overrides for the style of the tooltip
trackStyleCSSProperties
valuenumber
verticalboolean
tabIndexdeprecatednumber
do not use

Examples

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.

Edit guidelines