Slider

A slider lets users set a number by dragging a thumb along a track, and the filled part of the track shows what they have set. Users also change the value with a press on the track or with the arrow keys. The slider takes its values as an array with one entry per thumb, also when it has a single thumb. It has no label of its own, so the examples name it with a FieldTitle that aria-labelledby refers to.

UsageCopy Anchor Link

import { Field, FieldTitle } from "@biem/ui/components/ui/field";
import { Slider } from "@biem/ui/components/ui/slider";

export function SliderDefault() {
	return (
		<div className="w-full max-w-sm">
			<Field>
				<FieldTitle id="reorder-level">Reorder level</FieldTitle>
				<Slider aria-labelledby="reorder-level" defaultValue={[40]}/>
			</Field>
		</div>
	);
}

ExamplesCopy Anchor Link

RangeCopy Anchor Link

Filters often ask for a span instead of a single figure, such as the products that sell between two and five cases a week. When defaultValue holds two entries, the slider offers two thumbs, and users set the lower and the upper limit of the span on one track.

Multiple ThumbsCopy Anchor Link

A single scale can carry several thresholds, for example the stock levels at which an item counts as low, sufficient or overstocked. Each further entry in defaultValue adds a thumb, so users place every threshold on the same scale. During a drag, one thumb pushes the next one along, and the keyboard stops a thumb at its neighbor, so the thresholds always keep their order.

Minimum and MaximumCopy Anchor Link

Many values only make sense within natural limits, such as the shelf life of a product in days or the capacity of a shelf in cases. Through min and max the track covers just that span, so users cannot set a value outside it, and the full length of the track serves the values that matter.

StepCopy Anchor Link

Goods often move in fixed packing units, such as a case of twelve bottles. Set to the size of such a unit, step makes the thumb snap to whole units counted from min, and each press of an arrow key moves it by one unit. Users therefore never set a quantity that would leave a case half full.

Minimum Distance Between ThumbsCopy Anchor Link

A span that shrinks to a single value loses its meaning, for example a price band whose lower and upper limit coincide. With minStepsBetweenValues, neighboring thumbs keep at least that many steps between them, whether users drag a thumb or move it with the keyboard, so the span never narrows below a useful width.

Center AlignmentCopy Anchor Link

Where a slider lines up with a scale or a chart axis beside it, every thumb should point at the exact place of its value, the ends included. The value "center" of thumbAlignment places the center of a thumb on the end of the track at min and max, so its position matches the scale along the whole length.

VerticalCopy Anchor Link

In a narrow side panel or next to a column of figures, height is often easier to spare than width. With orientation set to "vertical", users set the value along the height, with min at the bottom, so a drag upward raises it. Its height comes from the element around it, and it never falls below 10rem.

ControlledCopy Anchor Link

Sometimes the application needs the values while users are still deciding, for example to update a forecast during a drag or to set the slider from a preset. Through value and onValueChange it holds the values itself, so other parts of the interface can display or change them. That matters all the more since the slider shows no number of its own.

DisabledCopy Anchor Link

A value can stay fixed for a while, for example while a central rule governs it or until users have chosen the store it applies to. Once disabled is set, the slider accepts no interaction, exposes its state to assistive technology and is left out when the form is submitted, while users still see the value it holds.

API ReferenceCopy Anchor Link