RangeSlider

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

Компонент включает несколько ключевых элементов: сам RangeSlider, ползунки (RangeSliderThumb), трек (RangeSliderTrack) и заполнение выбранного диапазона (RangeSliderFilledTrack). Эти элементы можно настраивать как визуально, так и функционально.

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

<RangeSlider defaultValue={[10, 30]} min={0} max={100} step={5}>
  <RangeSliderTrack>
    <RangeSliderFilledTrack />
  </RangeSliderTrack>
  <RangeSliderThumb index={0} />
  <RangeSliderThumb index={1} />
</RangeSlider>
  • defaultValue — задаёт начальные позиции ползунков.
  • min и max — минимальное и максимальное значение диапазона.
  • step — шаг изменения значения при перемещении ползунка.
  • index — указывает на номер ползунка (0 — первый, 1 — второй).

Стилизация RangeSlider

Chakra UI предоставляет гибкие возможности стилизации RangeSlider через встроенные пропсы и систему тем. Для кастомизации цветов трека и заполненной части диапазона используются пропсы colorScheme и bg.

<RangeSlider defaultValue={[20, 80]} colorScheme="teal" size="lg">
  <RangeSliderTrack bg="gray.200">
    <RangeSliderFilledTrack />
  </RangeSliderTrack>
  <RangeSliderThumb index={0} />
  <RangeSliderThumb index={1} />
</RangeSlider>
  • colorScheme — выбирает цветовую тему для заполненного трека и ползунков.
  • size — определяет размер ползунков и высоту трека (sm, md, lg).
  • bg — задаёт цвет трека, на котором ползунки перемещаются.

Для полной кастомизации можно использовать Chakra UI sx и styleConfig в теме, позволяя менять стили отдельных элементов компонента.

Управление состоянием и события

RangeSlider поддерживает управляемое и неуправляемое состояние. Для управляемого варианта используется проп value и событие onChange.

import { useState } from 'react';

const ControlledRangeSlider = () => {
  const [range, setRange] = useState([25, 75]);

  return (
    <RangeSlider value={range} onCha nge={val => setRange(val)} min={0} max={100}>
      <RangeSliderTrack>
        <RangeSliderFilledTrack />
      </RangeSliderTrack>
      <RangeSliderThumb index={0} />
      <RangeSliderThumb index={1} />
    </RangeSlider>
  );
};
  • value — текущий диапазон значений.
  • onChange — функция, вызываемая при перемещении ползунка, принимает массив [minValue, maxValue].
  • onChangeEnd — срабатывает после завершения перемещения ползунка, полезно для выполнения действий без лишних ререндеров при каждом движении.

Вертикальные и горизонтальные слайдеры

По умолчанию RangeSlider горизонтальный, но можно сделать вертикальный, задав проп orientation="vertical".

<RangeSlider orientation="vertical" min={0} max={100} defaultValue={[10, 50]} height="200px">
  <RangeSliderTrack>
    <RangeSliderFilledTrack />
  </RangeSliderTrack>
  <RangeSliderThumb index={0} />
  <RangeSliderThumb index={1} />
</RangeSlider>
  • orientation — "horizontal" или "vertical".
  • height / width — необходимо указать при вертикальном расположении для корректного отображения.

Адаптивность и доступность

Chakra UI автоматически обеспечивает доступность компонента. RangeSlider поддерживает клавиатурное управление:

  • Стрелки влево/вниз и вправо/вверх перемещают выбранный ползунок на шаг step.
  • Клавиши Home и End устанавливают ползунок на минимальное или максимальное значение.

Для экранных считывателей RangeSlider генерирует правильные aria-атрибуты: aria-valuemin, aria-valuemax, aria-valuenow и aria-orientation.

Дополнительные возможности

  1. Несколько ползунков — можно расширить компонент до более чем двух ползунков, управляя каждым через индекс.
  2. Динамический диапазон — изменения min, max и step на лету не требуют перерисовки всего компонента.
  3. Интеграция с формами — можно использовать вместе с react-hook-form или formik для управления значениями диапазона в форме.

Рекомендации по использованию

  • Использовать RangeSlider там, где визуальное представление диапазона повышает UX.
  • Для больших диапазонов использовать step > 1, чтобы движение ползунка было более предсказуемым.
  • Стилизовать трек и заполнение так, чтобы выбранный диапазон был заметен на фоне.

Эти возможности делают RangeSlider гибким инструментом для интерактивного выбора диапазона значений в интерфейсах на Chakra UI.

Оглавление