Slider

Installation

npm i @snack-uikit/slider

Changelog

Description

• Пакет @snack-uikit/slider предоставляет компонент Slider для выбора числовых значений из заданного диапазона путём перетаскивания ползунка или клика по треку.
• Компонент поддерживает одиночный режим (выбор одного значения) и режим диапазона (range: true) для выбора двух значений одновременно, что удобно для фильтров, настроек и выбора интервалов.
• Позволяет задать минимальное и максимальное значение (min, max), шаг изменения (step) и начальное значение (defaultValue) или работать в контролируемом режиме через проп value.
• Поддерживает метки (marks) для отображения ключевых точек на шкале с произвольными подписями и возможностью привязки к этим меткам вместо шага.
• Может отображать подсказки (handleTip: true) с текущим значением при перетаскивании ползунка, с возможностью кастомизации формата через tipFormatter.
• Поддерживает клавиатурное управление (стрелки, Page Up/Down, Home/End), автофокус и отключённое состояние (disabled).
• В режиме диапазона поддерживает перетаскивание трека (draggableTrack) для одновременного перемещения обоих ползунков и настройку минимального расстояния между ними (pushable).
• Может работать в реверсивном режиме (reverse: true) для инвертирования направления шкалы.
• Figma: Slider.

Example

import { Slider } from '@snack-uikit/slider';
import { useState } from 'react';

function Example() {
  const [value, setValue] = useState(50);
  const [rangeValue, setRangeValue] = useState([20, 80]);

  return (
    <>
      {/* Базовое использование с одним значением */}
      <Slider
        min={0}
        max={100}
        step={1}
        value={value}
        onChange={setValue}
        handleTip
      />

      {/* Режим диапазона */}
      <Slider
        range
        min={0}
        max={100}
        step={5}
        value={rangeValue}
        onChange={setRangeValue}
        draggableTrack
      />

      {/* С метками и кастомным форматированием подсказок */}
      <Slider
        min={1}
        max={16}
        value={4}
        marks={{ 1: '512mb', 4: '2gb', 8: '4gb', 16: '8gb' }}
        tipFormatter={(value) => {
          const marksMap: Record<number, string> = { 1: '512mb', 4: '2gb', 8: '4gb', 16: '8gb' };
          return marksMap[Number(value)] || value;
        }}
        handleTip
      />

      {/* Отключённое состояние */}
      <Slider
        disabled
        min={0}
        max={100}
        value={30}
      />
    </>
  );
}

Slider

Props

| name | type | default value | description | |------|------|---------------|-------------| | className | string | - | CSS-класс | | disabled | boolean | - | | | keyboard | boolean | - | | | autoFocus | boolean | - | | | onFocus | (e: FocusEvent<HTMLDivElement, Element>) => void | - | | | onBlur | (e: FocusEvent<HTMLDivElement, Element>) => void | - | | | range | boolean | - | | | count | number | - | | | min | number | - | | | max | number | - | | | step | number | - | | | value | number \| number[] | - | | | defaultValue | number \| number[] | - | | | onChange | (value: number \| number[]) => void | - | | | onBeforeChange | (value: number \| number[]) => void | - | @deprecated It's always better to use onChange instead | | onAfterChange | (value: number \| number[]) => void | - | @deprecated Use onChangeComplete instead | | onChangeComplete | (value: number \| number[]) => void | - | | | allowCross | boolean | - | | | pushable | number \| boolean | - | | | draggableTrack | boolean | - | range only | | reverse | boolean | - | | | included | boolean | - | | | startPoint | number | - | | | marks | Record<string \| number, ReactNode \| MarkObj> | - | | | dots | boolean | - | | | tabIndex | number \| number[] | - | | | ariaLabelForHandle | string \| string[] | - | | | ariaLabelledByForHandle | string \| string[] | - | | | ariaValueTextFormatterForHandle | AriaValueFormat \| AriaValueFormat[] | - | | | handleTip | boolean | - | | | tipFormatter | (value: string \| number) => ReactNode | - | |