Slider

Sliders (COMPONENT_SPEC §25; Compose Slider, VerticalSlider and RangeSlider): a handle on a track with a gap each side of it, an end stop indicator, and stops (ticks) when values snap to steps. Range sliders have two handles that meet but never cross; centered sliders fill from the middle (SliderDefaults.CenteredTrack); vertical sliders have their minimum at the bottom. Five sizes (XS default, S, M, L, XL) from the m3.material.io token DB; M, L and XL standard sliders take an inset icon. Pressing, dragging or keyboard focus halves the handle at once (Compose's ThumbContent) and shows the value indicator.

Vertical range sliders are not supported: Compose has none and m3.material.io advises against them ("Avoid using range sliders vertically"). The value indicator is not built into Compose (its samples put a tooltip in a Label); this one follows m3.material.io: inverse surface, label large, 12dp above the handle, 48 × 44dp.

Static (m3e-css)

.m3e-slider (--range, --centered, --vertical, --size-s|m|l|xl) with --m3e-comp-slider-value (0–1), --m3e-comp-slider-start-value (a range's start) and --m3e-comp-slider-steps on it; the __track holds the three track parts, one __tick per stop and a __thumb per value (a native <input type="range">, the __handle and the __value-indicator). CSS alone draws it; the element or React component moves it.

Standard

At the minimum

Stops

Range

Range with stops

Centered

Centered with stops

Disabled

Disabled with stops

Sizes and inset icon

Extra small

Small

Medium

Medium, low value

Large

Extra large

Vertical

Element

<m3e-slider label min max step value range start-value end-value centered vertical size icon disabled name> (@kyralabs/m3e-elements/slider.js): pointer drag and presses on the track (a range slider moves the closer handle), the keyboard (arrows by one step or 1 % of the range, Shift + arrow and Page Up / Page Down by a page, Home / End), andinput / change events with detail.value (a range: detail.start, detail.end).

Continuous 0.4

Steps of 10

Range 20 – 80

Centered

Medium with icon

React

<Slider value defaultValue onChange onChangeEnd minValue maxValue step size variant orientation icon isDisabled formatOptions name aria-label> and <RangeSlider value defaultValue onChange onChangeEnd minValue maxValue step size thumbLabels> (React Aria useSlider / useSliderThumb); the same DOM as the element.