@yandex/ui

# Slider <a href='https://github.yandex-team.ru/search-interfaces/frontend/tree/master/packages/lego-components/src/Slider' target='_blank'><img src='https://badger.yandex-team.ru/custom/[Исходники]/[Github ][green]/badge.svg' /></a> <a href='https://search.yandex-team.ru/stsearch?text=Slider.ts&facet.queue=ISL&facet.type=bug&facet.status=128' target='_blank'><img src='https://badger.yandex-team.ru/custom/[Известные проблемы]/[Startrek][blue]/badge.svg' /></a>  Компонент, позволяющий выбрать одно или два значения в пределах заданного диапазона.  ## Пример использования Конфигурация темы на уровне проекта: ```ts // src/lib/theme.ts import { configureRootTheme } from '@yandex-lego/components/Theme' import { theme } from '@yandex-lego/components/Theme/presets/default' configureRootTheme({ theme }) ``` Использование с нужным набором модификаторов: ```ts // src/App.ts import React, { useState } from 'react' import { compose } from '@bem-react/core' import { Slider as SliderBase, withViewDefault, useSliderState, } from '@yandex-lego/components/Slider/desktop' const Slider = compose(withViewDefault)(SliderBase) const App = () => { const state = useSliderState({ value: [10] }) return <Slider view="default" {...state} /> } ``` Использование с полным набором модификаторов: ```ts // src/App.ts import React, { useState } from 'react' import { Slider, useSliderState, } from '@yandex-lego/components/Slider/desktop/bundle' const App = () => { const state = useSliderState({ value: [10] }) return <Slider view="default" {...state} /> } ``` ## Примеры ### Базовый В самом простом случае достаточно указать `view` и `value`. Для того, чтобы задать диапазон, необходимо в свойство `value` передать два числа. {{%story::desktop:controls-slider-desktop--basic%}} ### Заполненный Чтобы показать индикатор выбранного диапазона, установите свойство `filled`. {{%story::desktop:controls-slider-desktop--filled%}} ### Развернутый Чтобы отобразить слайдер в обратном направлении, установите свойство `reverse`. {{%story::desktop:controls-slider-desktop--reversed%}} ### Дискретный Чтобы задать шаг смещения, установите свойство `step` с необходимым значением. > ⚠️ При больших значениях min/max рекомендуется так же устанавливать большое значение для шага. {{%story::desktop:controls-slider-desktop--stepped%}} ### Маркированный Чтобы разметить слайдер или показать значения в определенном шаге, установите следующие свойства: - `showTicks` — Показывает метки на треке - `showTickValues` — отображает значения на метках трека (по умолчанию показывает только минимальное и максимальное значения) > ⚠️ Не рекомендуется использовать данные свойства при очень больших значениях (min/max) и маленьком шаге (step), т.к. они создают лишние DOM-узлы. {{%story::desktop:controls-slider-desktop--marked%}} ### Пользовательский Thumb При необходимости можно заменить элемент `Thumb` на свою реализацию, для этого установите свойство `renderThumb` со своим компонентом. {{%story::desktop:controls-slider-desktop--custom-thumb%}} ### Пользовательский LabelTick При необходимости можно заменить элемент `LabelTick` на свою реализацию, для этого установите свойство `renderTickLabel` со своим компонентом. {{%story::desktop:controls-slider-desktop--custom-label-tick%}} ## Свойства  | Свойство | Тип | По умолчанию | Описание | | ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------- | | value | `number[]` | — | Выбранные значения на слайдере | | className? | `string` | — | Дополнительный класс у корневого DOM-элемента | | disabled? | `false \| true` | `false` | Неактивное состояние слайдера | | min? | `number` | `0` | Минимальное число, которое можно выбрать на слайдере<br>Может быть как положительным, так и отрицательным числом | | max? | `number` | `100` | Максимальное число, которое можно выбрать на слайдере<br>Должен быть только положительным числом | | step? | `number` | `1` | Шаг, который делает бегунок за одно обновление<br>Должен быть больше 0 и делиться на (max - min) | | filled? | `false \| true` | `false` | Отображает индикатор выбранного диапазона | | reverse? | `false \| true` | `false` | Отображает слайдер в противоположном направлении | | vertical? | `false \| true` | `false` | Устанавливает слайдер в вертикальную ориентацию | | onInput | `(event: any, value: number[]) => void` | — | Обработчик, который вызывается при каждом обновлении бегунка | | onChange? | `(event: any, value: number[]) => void` | — | Обработчик, который вызывается при окончательном выборе значения | | renderThumb? | `(props: SliderThumbProps, component: any) => ReactElement<any, string \| ((props: any) => ReactElement<any, string \| ... \| (new (props: any) => Component<any, any, any>)>) \| (new (props: any) => Component<...>)>` | — | Переопределяет компонент `SliderThumb` | | renderTickLabel? | `(props: SliderTickLabelProps, component: any) => ReactElement<any, string \| ((props: any) => ReactElement<any, string \| ... \| (new (props: any) => Component<any, any, any>)>) \| (new (props: any) => Component<...>)>` | `$renderTickLabel` | Переопределяет компонент `SliderTickLabel` | | showTicks? | `false \| true` | `false` | Показывает метки на треке | | showTickValues? | `false \| true` | `false` | Отображает значения на метках трека<br>По умолчанию показывает только минимальное и максимальное значения | | testId? | `string` | — | Идентификатор, используемый в тестах |  ## Доступность Слайдер устанавливает следующие свойства для элемента `Thumb`: - `role="slider"` - `aria-valuemin` - `aria-valuemax` - `aria-valuenow` - `aria-disabled` Элементы `Thumb` могут принимать фокус и управляться через клавиатуру: - Клавиши `tab` и `shift+tab` перемещают фокус между бегунками - Клавиши `arrow up` или `arrow right` увеличивают значение бегунка на один шаг - Клавиши `arrow down` или `arrow left` уменьшают значение бегунка на один шаг ## Улучшения Что можно улучшить: 1. Форкнуть пакет `react-range` и удалить весь лишний код, который мы не используем (расчет позиции марок, валидация, перетаскивание элемента range). 1. После форка пакета можно реализовать хук `useSlider`, который будет реализовывать всю логику и возвращать свойства для конкретных элементов. 1. Доработать клавиатурное управление (`fn+arrow left/right` на данный момент не работает).