All components (204)

Slider

Choice · Slider · .amset-slider

What it is and when to use it

A bar with one or two thumbs to choose a value, or a range, roughly within a known interval. The range comes simply from passing it an array: defaultValue={[120, 480]}.

When to use it

An approximate number, where where it lands matters more than the exact figure: a maximum price, a margin, a warning threshold.
format: number, currency (euros, or the code in currency) or percent (stored as a fraction of one: 0.35 is shown as 35 %).
marks puts ticks at every step (or wherever an array says) and ends writes the minimum and maximum below. valueText changes the value text ("3 nights", "Free").
onChangeEnd notifies only on release, so as not to request data at every step of the drag.

When not to

If the exact figure matters (an amount, some units): NumberField.
The price filter of a catalog, with histogram and fields to type in: RangeFilter.

Keyboard: Tab reaches the thumb; in a range, first the minimum and then the maximum. The arrows move one step (with Shift, a large jump), Page Up and Page Down make a large jump, Home and End go to the ends. In a range, the minimum cannot pass the maximum. Disabled, it does not move.

Accessibility: each thumb is a real <input type="range">, hidden under the circle that is seen, and says its already formatted value. In a range they are called "Minimum" and "Maximum" without having to ask for it (or whatever thumbLabels says). The slider does not validate by itself: the error and the help (hint) are linked to the thumbs, which are the ones with focus. hiddenLabel removes the label from view, not from the reader. The bar and the thumb are grabbed in 24 px with a mouse and in 44 px with a finger, even if they look thinner.

States: the thumb darkens on hover and while dragging, and grows a little while it is dragged. With the keyboard, or with a new value from outside, the thumb and the fill slide to their place; when dragging they stick to the finger. Keyboard focus is a 2 px ring around the thumb. With error the bar and the thumb turn red (data-invalid); disabled, gray and without a hand cursor.

Sizes: sm, md (default) and lg: bar of 4, 6 or 8 px, thumb of 14, 18 or 22 px, and the font of the label and the support text like that of the fields of the same size.

Context: it goes inside LocaleProvider (or AmsetProvider), which decides how numbers and amounts are written.

Fine-tuning: CSS variables on .amset-slider:

Measurements: --amset-slider-thick (the bar), --amset-slider-thumb (the diameter), --amset-slider-ring (the thumb's border, 2 px), --amset-slider-brand (the width of the ticks, 2 px), --amset-slider-radius (the ends of the bar) and --amset-slider-grow (how much the thumb grows when dragged: 1.15).
Font: --amset-slider-font (label and value), --amset-slider-description (help and error) and --amset-slider-ends.
Pressable zone: --amset-slider-target (24 px with a mouse, 44 with a finger).
Colors: --amset-slider-color (fill and ring: error and disabled change only this), --amset-slider-ink (the marks over the fill), --amset-slider-slot and --amset-slider-border (the empty bar), --amset-slider-background-thumb and --amset-slider-color-brand.

What it looks like

<Slider label="Maximum price" format="currency" minValue={0} maxValue={500} step={10} defaultValue={250} />
<Slider label="Price" format="currency" maxValue={1000} defaultValue={[120, 480]} ends />
<Slider label="Applied margin" format="percent" maxValue={1} step={0.05} defaultValue={0.35} marks />

Props

Import it with import { Slider } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`label`required	`string`	—
`aria-describedby`	`string`	—
`aria-details`	`string`	—
`aria-label`	`string`	—
`aria-labelledby`	`string`	—
`className`	`string`	—
`currency`	`string`	ISO code when the format is currency.
`customFormat`	`Intl.NumberFormatOptions`	Escape hatch for a format not covered by the three above.
`decimals`	`number`	—
`defaultValue`	`T`	—
`disabled`	`boolean`	—
`ends`	`boolean`	Numbers for the minimum and the maximum below the bar.
`error`	`string`	A text here draws it as an error and announces it: the slider does not validate by itself.
`format`	`SliderFormat`	—
`hiddenLabel`	`boolean`	Removes the label from view and moves it to `aria-label`. For when the name is already written next to it (an own header, a table cell): the reader still reads it, which is what cannot be lost.
`hint`	`string`	—
`id`	`string`	—
`marks`	`boolean \| readonly number[]`	Lines below the bar: `true` takes them out of the way, an array places them where it says.
`maxValue`	`number`	—
`minValue`	`number`	—
`name`	`string`	So that the value travels in a native form. With several handles, each one carries this name.
`onChange`	`(value: T) => void`	—
`onChangeEnd`	`(value: T) => void`	On release: the one that is valid for asking a server for something.
`orientation`	`"horizontal" \| "vertical"`	—
`showValue`	`boolean`	The current value next to the label.
`size`	`"sm" \| "md" \| "lg"`	Thickness of the bar, diameter of the handle and font size: `sm` (4 and 14 px), `md` (6 and 18 px, the default) or `lg` (8 and 22 px). The pressable area does not go below 24 px with a mouse or 44 with a finger.
`step`	`number`	—
`thumbLabels`	`readonly string[]`	What each handle is called in a range. "Minimum" and "Maximum" by default.
`value`	`T`	—
`valueText`	`(values: readonly number[], formatted: string) => string`	Custom text for the value: "3 nights", "Free"...

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-slider-thick`	`6px`
`--amset-slider-thumb`	`1.125rem`
`--amset-slider-ring`	`2px`
`--amset-slider-brand`	`2px`
`--amset-slider-radius`	`999px`
`--amset-slider-font`	`var(--amset-text-sm)`
`--amset-slider-description`	`var(--amset-text-sm)`
`--amset-slider-ends`	`var(--amset-text-xs)`
`--amset-slider-target`	`1.5rem`
`--amset-slider-grow`	`1.15`
`--amset-slider-color`	`var(--amset-accent)`
`--amset-slider-ink`	`var(--amset-accent-ink)`
`--amset-slider-slot`	`var(--amset-surface-2)`
`--amset-slider-border`	`var(--amset-border)`
`--amset-slider-background-thumb`	`var(--amset-surface)`
`--amset-slider-color-brand`	`var(--amset-border-bold)`

How to change it

.amset-slider {
  --amset-slider-thick: ...;
  --amset-slider-thumb: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: