Slider

Элемент ввода, в котором пользователь выбирает значение из заданного диапазона.

Установка


pnpm dlx shadcn@latest add @oracul/slider

Использование

import { Slider, SliderValue } from "@/components/ui/slider"

<Slider />

Справочник API

Slider

Корневой компонент. Стилизованная обёртка для Slider.Root из Base UI со значениями min/max по умолчанию и ползунками, выровненными по краю.

Свойство	Тип	По умолчанию	Описание
`min`	`number`	`0`	Минимальное значение слайдера
`max`	`number`	`100`	Максимальное значение слайдера

Примечание: По умолчанию компонент задаёт thumbAlignment="edge", что выравнивает ползунки по краю дорожки, а не центрирует их.

SliderValue

Отображает текущее значение. Стилизованная обёртка для Slider.Value из Base UI.

Примеры

Для доступной разметки и валидации предпочтительно использовать компонент Field для обёртки чекбоксов. См. соответствующий пример: Поле слайдера.

С меткой и значением

Непрозрачность50

import { Field, FieldLabel } from "@/components/ui/field";
import { Slider, SliderValue } from "@/components/ui/slider";

export default function Particle() {
  return (
    <Field>
      <Slider defaultValue={50}>
        <div className="mb-2 flex items-center justify-between gap-1">
          <FieldLabel className="font-medium text-sm">
            Непрозрачность
          </FieldLabel>
          <SliderValue />
        </div>
      </Slider>
    </Field>
  );
}

Слайдер диапазона

Вертикальный

5 ГБ20 ГБ35 ГБ

import { Slider } from "@/components/ui/slider";

export default function Particle() {
  return (
    <div>
      <Slider
        aria-label="Объём хранилища в ГБ"
        defaultValue={15}
        max={35}
        min={5}
      />
      <div
        aria-label="Опорные значения объёма хранилища"
        className="mt-4 flex w-full items-center justify-between gap-1 font-medium text-muted-foreground text-xs"
        role="group"
      >
        <span>5 ГБ</span>
        <span>20 ГБ</span>
        <span>35 ГБ</span>
      </div>
    </div>
  );
}

Интеграция с формой

0123456789101112

import { cn } from "@/lib/utils";
import { Slider } from "@/components/ui/slider";

const max = 12;
const skipInterval = 2;
const ticks = [...Array(max + 1)].map((_, i) => i);

export default function Particle() {
  return (
    <div>
      <Slider aria-label="Выбор значения" defaultValue={5} max={max} />
      <div
        aria-label="Шкала значений от 0 до 12"
        className="mt-3 flex w-full items-center justify-between gap-1 px-2.5 font-medium text-muted-foreground text-xs"
        role="group"
      >
        {ticks.map((_, i) => (
          <span
            className="flex w-0 flex-col items-center justify-center gap-2"
            key={String(i)}
          >
            <span
              className={cn(
                "h-1 w-px bg-muted-foreground/72",
                i % skipInterval !== 0 && "h-0.5",
              )}
            />
            <span className={cn(i % skipInterval !== 0 && "opacity-0")}>
              {i}
            </span>
          </span>
        ))}
      </div>
    </div>
  );
}

На этой странице

Установка Использование Справочник API Slider SliderValue Примеры С меткой и значением Слайдер диапазона Вертикальный Интеграция с формой