Slider

Slider хранит number | [number, number]: число создаёт один бегунок, пара — два. Горизонтальная шкала Bits UI применяет step и автоматически сохраняет порядок границ при их пересечении.

Статус: experimental · в системе с 2026-07 · интерактивность: always (всегда)

Когда использовать

Важнее быстро выбрать положение в известном диапазоне, чем ввести точное число.
Нужно задать нижнюю и верхнюю границы на одной общей шкале.
Шаг и крайние значения понятны из контекста задачи.

Не использовать:

Точное число вводят или копируют — используй Input Number.
Значения являются именованными вариантами — используй Select или Segmented Control.
Диапазон не имеет конечных min и max.

Альтернативы:

input-number — точный числовой ввод и явные кнопки шага
segmented-control — несколько именованных взаимоисключающих вариантов

Одно значение

Один бегунок выбирает число на общей шкале.

Громкость 40

<!--
  🟢

  Базовый пример Slider показывает одно числовое значение. Указатель и
  клавиатура изменяют его с одинаковым шагом.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Slider from "$lib/ui/Slider.svelte";

let volume = $state(40);
</script>

<div style="width: var(--control-field-min);">
	<Slider label={t("Громкость")} step={10} bind:value={volume} />
</div>

Диапазон

Два бегунка хранят упорядоченную пару и меняются местами при пересечении.

Диапазон охвата 20 — 80

<!--
  🟢

  Пример диапазона Slider хранит две границы на одной шкале. При пересечении
  бегунки меняются местами, поэтому value остаётся упорядоченным.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Slider from "$lib/ui/Slider.svelte";

let range = $state([20, 80]);
</script>

<div style="width: var(--control-field-min);">
	<Slider
		label={t("Диапазон охвата")}
		min={0}
		max={100}
		step={5}
		bind:value={range}
	/>
</div>

Поле

Подпись, точный step, описание и ошибка относятся ко всей шкале.

Ставка 35

Шаг изменения — 5.

Рабочий диапазон 70 — 90

Диапазон выходит за рабочий предел.

<!--
  🟢

  Полевой пример Slider показывает описание и ошибку шкалы. Сообщение
  относится к значению целиком и связывается с каждым бегунком.
-->

<script>
import { t } from "$lib/spec/demo-lang.svelte.js";
import Slider from "$lib/ui/Slider.svelte";

let bid = $state(35);
let invalidRange = $state([70, 90]);
</script>

<div
	style="display: grid; gap: var(--sp-3); width: var(--control-field-min);"
>
	<Slider
		label={t("Ставка")}
		description={t("Шаг изменения — 5.")}
		step={5}
		bind:value={bid}
	/>
	<Slider
		label={t("Рабочий диапазон")}
		error={t("Диапазон выходит за рабочий предел.")}
		bind:value={invalidRange}
	/>
</div>