Slider

Пропсы корня

Также принимает все атрибуты <div>.

Дочерние части

• SliderTrack: дорожка, div.
• SliderRange: заполненная часть дорожки, div внутри SliderTrack.
• SliderThumb: один бегунок, div с display: contents, объединяющий поле ввода и индикатор.
  • index: его элемент в value корня, по умолчанию 0
  • задаёт переменные положения; CSS-переменные в его style доходят до обеих частей
• SliderThumbInput: нативный <input type="range"> внутри SliderThumb. Все его пропсы (name, disabled, list, aria-*, onChange, ref…) уходят в поле ввода; min, max, step и value приходят из корня.
• SliderThumbIndicator: визуальный бегунок внутри SliderThumb, div с любым содержимым. Он aria-hidden и пропускает указатель к полю ввода.

SliderTrack

Также принимает все атрибуты <div>.

SliderRange

Также принимает все атрибуты <div>.

SliderThumb

Также принимает все атрибуты <div>.

SliderThumbInput

Также принимает все атрибуты <input>.

SliderThumbIndicator

Также принимает все атрибуты <div>.

Хуки

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

useSliderContext

Состояние корня, доступное в любом месте внутри Slider:

useSliderThumbContext

Окружающий SliderThumb:

Пузырёк со значением, который работает и без value на корне:

import {
  Slider,
  SliderRange,
  SliderThumb,
  SliderThumbIndicator,
  SliderThumbInput,
  SliderTrack,
  Text,
  useSliderContext,
  useSliderThumbContext,
} from '@vega-ui/react';

Типы

• SliderProps
• SliderTrackProps
• SliderRangeProps
• SliderThumbProps
• SliderThumbInputProps
• SliderThumbIndicatorProps
• SliderSize
• SliderVariant
• SliderOrientation

Модель состояния

Slider владеет значениями своих бегунков. Форма значения следует value или defaultValue: число для одного бегунка, массив с одним элементом на каждый SliderThumb по его index — для нескольких. onChangeValue получает ту же форму.

• Неконтролируемый: defaultValue задаёт начальное значение; сброс формы бегунков восстанавливает его, в том числе для формы, связанной через атрибут form. Без value и defaultValue у слайдера один бегунок посередине диапазона и он сообщает числа, как <input type="range">.
• Контролируемый: value вместе с onChangeValue. Изменение, которое родитель не применил, откатывается, как у контролируемого поля ввода.
• Каждый бегунок — контролируемое нативное поле: указатель, клавиатуру, фокус, формы и вспомогательные технологии обеспечивает браузер, а onChange на бегунке срабатывает при каждом изменении.
• Значения вне сетки шага или за пределами min/max приводятся так же, как это делает <input type="range">, без вызова onChangeValue.
• Форма фиксируется первым значением: переключение между числом и массивом на лету не поддерживается.

import { useState } from 'react';
import {
  Label,
  Slider,
  SliderRange,
  SliderThumb,
  SliderThumbIndicator,
  SliderThumbInput,
  SliderTrack,
  Text,
} from '@vega-ui/react';

import { useState } from 'react';
import {
  Fieldset,
  FieldsetLegend,
  Slider,
  SliderRange,
  SliderThumb,
  SliderThumbIndicator,
  SliderThumbInput,
  SliderTrack,
  Text,
} from '@vega-ui/react';

Ограничения бегунков

• Каждое поле бегунка получает собственные нативные min и max: значения соседей с отступом minStepsBetweenThumbs * step или min и max корня на краях. Браузер удерживает бегунок между ними при перетаскивании и нажатии клавиш, а aria-valuemin/aria-valuemax объявляют реальные пределы.
• При step='any' шаг считать не из чего, поэтому minStepsBetweenThumbs не действует и бегунки могут сойтись; чтобы сохранить промежуток, используйте маленький числовой шаг, например 0.01.
• Значения, переданные не по порядку, сортируются и разводятся на minStepsBetweenThumbs шагов без вызова onChangeValue, чтобы бегунки, поля ввода и отправляемые значения совпадали.

Поведение

• Как и у <input type="range">, шаги отсчитываются от min, а значение остаётся между min и последним шагом, который помещается в max.
• Поля ввода соседних бегунков обрезаются по середине между их значениями, поэтому клик по дорожке нативно двигает ближайший бегунок. Бегунки, стоящие друг на друге, делятся по центру: левая половина двигает нижний, правая — верхний.
• Отключённый бегунок сохраняет свою половину дорожки: клик по ней ничего не делает.
• На сенсорных экранах горизонтальный слайдер оставляет жесты браузеру, как <input type="range">; вертикальный задаёт touch-action: pan-x pinch-zoom, поэтому вертикальный свайп двигает бегунок, а не прокручивает страницу.
• <datalist>, подключённый через list, нативно примагничивает указатель; его деления не видны — рисуйте свои.