Slider

Паттерны

Регулировка громкости или яркости

Когда использовать:

• пользователи быстро настраивают одно ограниченное значение

Заметки о композиции:

• показывайте текущее значение рядом, если важна точность
• делайте слайдер достаточно широким для комфортного перетаскивания

Компромиссы:

• быстро и тактильно
• менее точно, чем ввод с клавиатуры

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

Фильтр по диапазону цен

Когда использовать:

• пользователи выбирают нижнюю и верхнюю границы

Заметки о композиции:

• подпишите оба бегунка
• задайте minStepsBetweenThumbs, если границы не должны сходиться

Компромиссы:

• один элемент для двух связанных значений
• близко стоящие бегунки труднее захватить; клик по дорожке двигает ближайший

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

Вертикальный элемент управления

Когда использовать:

• раскладка узкая, и вертикальный элемент читается лучше

Заметки о композиции:

• задайте orientation='vertical'
• обеспечьте реальную высоту

Компромиссы:

• эффективно в некоторых плотных раскладках
• проще отрендерить неправильно, чем горизонтальный вариант по умолчанию

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

export default function VerticalSlider() {

Значение на бегунке

Когда использовать:

• точное значение важно во время перетаскивания, а места для отдельного вывода нет

Заметки о композиции:

• контролируйте значение и выводите его внутри SliderThumbIndicator, чтобы подпись двигалась вместе с бегунком
• скройте подпись от вспомогательных технологий: поле уже озвучивает значение

Компромиссы:

• значение остаётся рядом с указателем
• подписи нужно свободное место над дорожкой

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

export default function ValueLabelOnThumb() {

Дискретные шаги с подписями

Когда использовать:

• значение — одна из нескольких именованных опций, например тарифы или уровни

Заметки о композиции:

• сопоставьте индексы с подписями: min={0}, max — последний индекс, step={1}
• передайте подпись в aria-valuetext, чтобы скринридер озвучивал опцию, а не индекс

Компромиссы:

• все опции видны сразу
• подходит только для короткого списка: длинные подписи наползают друг на друга

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

const plans = ['1 GB', '5 GB', '20 GB', '100 GB', '1 TB'];

Сравнение

Быстрое правило выбора

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

Slider или NumberField

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

Один бегунок или несколько

• Один SliderThumb выбирает одно значение.
• Два SliderThumb выбирают диапазон; minStepsBetweenThumbs не даёт концам сблизиться.

Slider или <input type="range">

• Каждый бегунок — это нативное поле, поэтому поведение в форме и с клавиатуры то же самое.
• Slider добавляет внешний вид дизайн-системы, несколько бегунков на одной дорожке и заливку диапазона.

Выбирайте этот компонент, когда

• одно или несколько ограниченных значений часто настраиваются
• перетаскивание подходит лучше, чем набор с клавиатуры

Не выбирайте этот компонент, когда

• важнее всего точный ввод

Решение проблем

Значение не попадает в отправку формы

Симптом

Визуально элемент работает, но в данных формы нет значения слайдера.

Вероятная причина

Ни у корня, ни у бегунка нет name.

Как проверить

• отправьте форму
• изучите FormData

Исправление

Задайте name на Slider или на каждом SliderThumbInput. Несколько бегунков с одним именем читаются через FormData.getAll.

Контролируемый слайдер не двигается

Симптом

Бегунки отскакивают назад после каждого перетаскивания или нажатия клавиши.

Вероятная причина

value задан, но onChangeValue не сохраняет новые значения.

Как проверить

• выведите в лог значение, которое получает onChangeValue
• проверьте, что состояние, переданное в value, меняется

Исправление

Сохраняйте значение из onChangeValue в состояние, переданное в value, или используйте defaultValue, если слайдер не обязан быть контролируемым.

Бегунок показывает не то значение

Симптом

Бегунок стоит на значении другого бегунка или одного бегунка не хватает.

Вероятная причина

У бегунков нет index, у двух он одинаковый или число бегунков отличается от числа значений.

Как проверить

• сравните index каждого SliderThumb с длиной value или defaultValue

Исправление

Рендерите по одному SliderThumb на значение с index={0}, index={1}… по порядку.

Вертикальным слайдером неудобно пользоваться или его не видно

Симптом

Вертикальный слайдер плохо рендерится или у него почти нет рабочей дорожки.

Вероятная причина

Корень переключили на вертикальную ориентацию без явной высоты.

Как проверить

• изучите вычисленную высоту контейнера слайдера

Исправление

Задавайте реальную высоту всякий раз, когда используется orientation='vertical'.

Пользователи не могут надёжно попасть в точное значение

Симптом

Перетаскивание кажется неточным для поставленной задачи.

Вероятная причина

Элемент используют в сценарии, где нужен точный ввод.

Как проверить

• протестируйте с реально требуемой точностью, а не только на грубых настройках

Исправление

Перейдите на NumberField или дополните слайдер более точным полем ввода.