Slider

Set a number, or a range, by position.

<mm-slider name="depth" label="Lineage depth" min="1" max="10" value="3" unit="levels"></mm-slider>
<mm-slider name="rows" label="Row limit" min="100" max="10000" step="100" range value="1000" value-end="5000" unit="rows"></mm-slider>

Guidance

Sliders set a number within a known range where the exact value matters less than its position: lineage depth, a row limit, a sampling rate. The value is always printed beside the label in a mono, tabular readout with its unit, so nobody has to guess from the thumb. The track is mm-rule, the filled part mm-text-2 (never burnt sienna) and the thumb is ink with the standard focus ring. With range, two thumbs set a lower and upper bound. Use a number input when people know the exact value.

Keyboard follows the WAI-ARIA slider and multi-thumb slider patterns (https://www.w3.org/WAI/ARIA/apg/patterns/slider/ and https://www.w3.org/WAI/ARIA/apg/patterns/slider-multithumb/): arrows step (left and right flip in right-to-left), Page Up and Page Down move a tenth of the range, Home and End go to the limits.

Properties

Property	Attribute	Type	Default	Description
label	label	string	''	Visible label above the track.
help	help	string	''
error	error	string	''
min	min	number	0
max	max	number	100
step	step	number	1
value	value	number	0	The value, or the lower bound with range.
valueEnd	value-end	number	100	The upper bound with range.
range	range	boolean	false	Two thumbs for a lower and upper bound. Submits two entries under name.
unit	unit	string	''	Unit printed after the value in the readout, such as rows.
format		((value: number) => string) | undefined		Custom readout and aria-valuetext formatter.
hideEnds	hide-ends	boolean	false	Hide the min and max labels under the track.
name	name	string	''	Name submitted with the form.
disabled	disabled	boolean	false	Disables the control and excludes it from submission.
required	required	boolean	false	Requires a value before the form submits.
form		HTMLFormElement | null
validity		ValidityState
validationMessage		string
willValidate		boolean
isDisabled		boolean		True when disabled directly or by a disabled ancestor fieldset.

Methods

Method	Description
formResetCallback()	Restore the initial value when the owning form resets.

Events

Event	Detail	Description
change	Event	Native-style change event.
mm-input	CustomEvent<{ value: number; valueEnd?: number }>	The value is changing (dragging or a key press).
mm-change	CustomEvent<{ value: number; valueEnd?: number }>	The value was committed (pointer released or a key press).

CSS parts

Part	Description
readout	The value readout.
track	The track.
fill	The filled part of the track.
thumb	Each thumb.

Examples

Every state of mm-slider in Storybook, with keyboard and screen reader tests.