Slider

import { Slider } from '@enmovil/ui-design-system';

Lets the user pick a single value or a range (mode) by dragging a handle along a track. It supports steps, marks, a vertical layout and a reversed direction.

Properties

Property	Type	Required	Default	Allowed values	Description
mode	string	Yes	—	'range', 'single'	range gives two handles and a [start, end] value; single gives one handle and a number value.
value	number | [number, number]	No	—	—	Current value when controlled: a number, or [start, end] in range mode.
defaultValue	number | [number, number]	No	—	—	Initial value when uncontrolled: a number, or [start, end] in range mode.
min	number	No	—	—	Smallest selectable value. Defaults to 0.
max	number	No	—	—	Largest selectable value. Defaults to 100.
step	number | null	No	—	—	Amount each move changes the value by. Defaults to 1; with null the handles can only stop on marks.
marks	Record<number, ReactNode>	No	—	—	Labels shown along the track, keyed by the value they mark.
dots	boolean	No	—	—	Draws a dot on the track at every step.
included	boolean	No	—	—	Highlights the track up to the handle, or between the handles in range mode. On by default; turn it off to show the handles on a plain track, for example with marks.
disabled	boolean	No	—	—	Greys out the slider and stops the handles from moving.
vertical	boolean	No	—	—	Lays the slider out vertically. Give its container a height.
reverse	boolean	No	—	—	Reverses the direction, so min is at the right (at the top when vertical).
className	string	No	—	—	CSS class of the slider. It replaces the component's own enmv-slider class, so the design-system track and handle colours are lost.
style	CSSProperties	No	—	—	Inline styles of the slider's outer element.
id	string	No	—	—	id of the slider's outer element.
percent	number	No	—	—	Not a prop of the component. It appears only in the stories' controls and has no effect.
status	string	No	—	'active', 'success', 'normal', 'exception'	Not a prop of the component. It appears only in the stories' controls and has no effect.
width	number	No	—	—	Not a prop of the component. It appears only in the stories' controls and has no effect.

Other attributes

Slider passes 17 further attributes through to the underlying element. They aren't part of the supported API and may change between releases, so use only the properties listed on this page.

Events

Name	Signature	When it fires
onChange	((value: number) => void) | ((value: [number, number]) => void)	Fires continuously while a handle is dragged or moved with the keyboard.
onAfterChange	((value: number) => void) | ((value: [number, number]) => void)	Older name for onChangeComplete: fires once with the final value when the drag or key press ends. Logs a deprecation warning, so prefer onChangeComplete.
onChangeComplete	((value: [number, number]) => void) | ((value: [number, number]) => void)	Fires once when the drag or key press ends. Use it for expensive work such as refetching.
onFocus	FocusEventHandler<HTMLDivElement>	Fires when a handle receives focus.
onBlur	FocusEventHandler<HTMLDivElement>	Fires when a handle loses focus.

Children

Slider does not accept children.

Variants

Loading examples…

Playground

Change the controls to see how the properties affect the component. Values the controls don't cover come from the simple example.

Loading playground…

Storybook

Open Slider in Storybook to try every story with the full set of controls.