Slider

Slider в Chakra UI — это компонент для выбора числового значения из заданного диапазона с помощью перетаскиваемого ползунка. Он используется для регулировки параметров, таких как громкость, яркость или значения фильтров. Slider реализован с поддержкой доступности и полностью управляется через свойства React.

Базовый синтаксис:

import { Slider, SliderTrack, SliderFilledTrack, SliderThumb } from "@chakra-ui/react";

<Slider defaultValue={30} min={0} max={100} step={5}>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>
  • defaultValue — начальное значение ползунка.
  • min и max — минимальное и максимальное значение диапазона.
  • step — шаг изменения значения при движении ползунка.

SliderTrack задает видимую дорожку ползунка, SliderFilledTrack отображает заполненную часть до текущего значения, а SliderThumb — сам перетаскиваемый элемент.

Управляемый и неуправляемый Slider

Slider может быть неуправляемым с defaultValue или управляемым, когда его значение хранится в состоянии React:

import { useState } from "react";
import { Slider, SliderTrack, SliderFilledTrack, SliderThumb } from "@chakra-ui/react";

const ControlledSlider = () => {
  const [value, setValue] = useState(50);

  return (
    <Slider value={value} onCha nge={(val) => setValue(val)} min={0} max={100}>
      <SliderTrack>
        <SliderFilledTrack />
      </SliderTrack>
      <SliderThumb />
    </Slider>
  );
};
  • value — текущее значение ползунка.
  • onChange — функция, вызываемая при изменении значения.

Это позволяет синхронизировать Slider с другими элементами интерфейса и выполнять побочные эффекты при изменении значения.

Стилизация и варианты внешнего вида

Chakra UI предоставляет мощные возможности для кастомизации Slider через props и системные стили.

Цвет и размер

<Slider colorScheme="teal" size="lg" defaultValue={40}>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>
  • colorScheme — задает цветовую схему ползунка.
  • size — размер: sm, md, lg. Размер влияет на толщину дорожки и размер Thumb.

Фокус и ховер

Slider поддерживает состояния :hover, :focus и :active для улучшения интерактивности:

<Slider
  _hover={{ thumb: { boxShadow: "0 0 0 8px rgba(72,187,120,0.24)" } }}
  _focus={{ thumb: { boxShadow: "outline" } }}
>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>
</Slider>
  • **_hover** и **_focus** применяются к внутренним элементам (SliderThumb или SliderTrack).

Диапазоны и множественные Thumb

Chakra UI поддерживает RangeSlider, когда нужно выбрать диапазон значений:

import { RangeSlider, RangeSliderTrack, RangeSliderFilledTrack, RangeSliderThumb } from "@chakra-ui/react";

<RangeSlider defaultValue={[20, 80]} min={0} max={100} step={5}>
  <RangeSliderTrack>
    <RangeSliderFilledTrack />
  </RangeSliderTrack>
  <RangeSliderThumb index={0} />
  <RangeSliderThumb index={1} />
</RangeSlider>
  • defaultValue — массив из двух значений [minValue, maxValue].
  • index — указывает, какому Thumb соответствует элемент.

RangeSlider полезен для фильтров цен, диапазонов времени и других случаев, где требуется два значения одновременно.

Вспомогательные свойства

  • isDisabled — блокирует взаимодействие.
  • isReadOnly — делает ползунок только для чтения без блокировки визуального взаимодействия.
  • orientation — вертикальный (vertical) или горизонтальный (horizontal).
  • aria-label / aria-labelledby — задают доступность для экранных читалок.

Пример вертикального Slider:

<Slider orientation="vertical" min={0} max={100} defaultValue={50} height="200px">
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>
</Slider>

События и обратная связь

Помимо onChange, Slider поддерживает:

  • onChangeStart — вызывается при начале перетаскивания Thumb.
  • onChangeEnd — вызывается при завершении перетаскивания.
<Slider
  onChangeSt art={() => console.log("Начало")}
  onChange End={(val) => console.log("Конец", val)}
>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>
</Slider>

Эти события полезны для оптимизации работы с API или динамической подгрузки данных при изменении значения.

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

Slider легко интегрируется с формами и библиотеками управления состоянием, например, с React Hook Form или Formik, используя управляемые значения:

<Slider
  value={form.values.volume}
  onCha nge={(val) => form.setFieldValue("volume", val)}
  min={0}
  max={100}
>
  <SliderTrack>
    <SliderFilledTrack />
  </SliderTrack>
  <SliderThumb />
</Slider>
</Slider>

Таким образом Slider становится полноценным контролом ввода числовых значений, полностью синхронизированным с логикой формы.

Ключевые моменты использования Slider

  • Компонент полностью доступен и поддерживает клавиатурное управление (ArrowLeft, ArrowRight, ArrowUp, ArrowDown).
  • Легко кастомизируется через системные стили Chakra UI.
  • Поддерживает управляемые и неуправляемые состояния.
  • RangeSlider расширяет функционал для выбора диапазонов.
  • События onChangeStart и onChangeEnd позволяют оптимизировать взаимодействие с внешними процессами.
  • Интеграция с формами и состоянием React проста и гибка.

Slider в Chakra UI — это гибкий, визуально настраиваемый и доступный инструмент для выбора числовых значений в интерфейсе, подходящий для большинства задач регулировки параметров.

Оглавление