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

Слайдеры в MUI (Slider) представляют собой интерактивные элементы управления, позволяющие пользователю выбирать значение из диапазона. Они поддерживают как горизонтальную, так и вертикальную ориентацию, а также работу с одиночными значениями и диапазонами.

Базовый импорт и использование выглядит следующим образом:

import Slider from '@mui/material/Slider';

<Slider
  defaultValue={30}
  min={0}
  max={100}
/>

Здесь defaultValue задаёт начальное положение ползунка, а min и max определяют диапазон значений.

Горизонтальные слайдеры

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

Основные свойства:

  • value: текущее значение слайдера. Используется при контролируемом компоненте.
  • defaultValue: начальное значение при неконтролируемом компоненте.
  • step: шаг изменения значения при перемещении ползунка.
  • marks: массив объектов с метками для отображения значений вдоль шкалы.
  • valueLabelDisplay: определяет, как отображается подпись текущего значения (auto, on, off).

Пример горизонтального слайдера с метками и шагом:

<Slider
  defaultValue={20}
  step={10}
  marks={[
    { value: 0, label: '0°C' },
    { value: 20, label: '20°C' },
    { value: 37, label: '37°C' },
    { value: 100, label: '100°C' }
  ]}
  valueLabelDisplay="on"
/>

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

Вертикальная ориентация активируется через свойство orientation="vertical". Такие слайдеры чаще применяются в интерфейсах с ограниченной горизонтальной областью или для визуального соответствия определённой модели управления.

Пример вертикального слайдера:

<Slider
  orientation="vertical"
  defaultValue={50}
  min={0}
  max={100}
  valueLabelDisplay="auto"
  style={{ height: 200 }}
/>

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

Настройка меток и шагов:

<Slider
  orientation="vertical"
  step={5}
  marks={[
    { value: 0, label: 'Низ' },
    { value: 50, label: 'Сред' },
    { value: 100, label: 'Выс' }
  ]}
  valueLabelDisplay="on"
  min={0}
  max={100}
/>

Диапазоны и контроль значений

Слайдер может работать не только с одним значением, но и с диапазоном. Для этого используется массив [minValue, maxValue]:

<Slider
  value={[20, 80]}
  onCha nge={(e, newValue) => console.log(newValue)}
  valueLabelDisplay="auto"
  min={0}
  max={100}
/>

Особенности работы с диапазонами:

  • При перетаскивании одного из ползунков изменяется соответствующая граница диапазона.
  • Можно использовать disableSwap, чтобы ограничить пересечение ползунков.
  • Поддерживаются все свойства для ориентации, меток и шагов.

Настройка внешнего вида

MUI предоставляет возможность кастомизации стиля слайдера через sx или styled. Например:

<Slider
  defaultValue={40}
  sx={{
    color: 'success.main',
    height: 8,
    '& .MuiSlider-thumb': {
      height: 24,
      width: 24,
      backgroundColor: '#fff',
      border: '2px solid currentColor'
    },
    '& .MuiSlider-track': {
      border: 'none'
    }
  }}
/>

Ключевые элементы для стилизации:

  • .MuiSlider-thumb — ползунок.
  • .MuiSlider-track — заполненная часть дорожки.
  • .MuiSlider-rail — оставшаяся часть дорожки.
  • .MuiSlider-mark и .MuiSlider-markLabel — метки.

Работа с событиями

Слайдер в MUI поддерживает несколько событий:

  • onChange — вызывается при каждом изменении значения.
  • onChangeCommitted — вызывается при завершении изменения (например, при отпускании мыши).

Пример:

<Slider
  defaultValue={30}
  onCha nge={(e, value) => console.log('Изменение:', value)}
  onChangeCommit ted={(e, value) => console.log('Подтверждено:', value)}
/>

Комплексные примеры

Вертикальный диапазон с метками и кастомной высотой:

<Box sx={{ display: 'flex', height: 300, alignItems: 'center' }}>
  <Slider
    orientation="vertical"
    value={[10, 90]}
    min={0}
    max={100}
    step={5}
    marks={[
      { value: 0, label: '0' },
      { value: 50, label: '50' },
      { value: 100, label: '100' }
    ]}
    valueLabelDisplay="on"
    sx={{ mx: 4 }}
  />
</Box>

Горизонтальный слайдер с динамическим цветом и размерами:

<Slider
  defaultValue={60}
  min={0}
  max={100}
  step={10}
  valueLabelDisplay="on"
  sx={{
    color: 'secondary.main',
    height: 10,
    '& .MuiSlider-thumb': {
      width: 28,
      height: 28,
      '&:hover, &.Mui-focusVisible': {
        boxShadow: '0 0 0 8px rgba(0,0,0,0.16)'
      }
    }
  }}
/>

Итоговые рекомендации по использованию слайдеров MUI

  • Для контролируемых компонентов всегда использовать value и onChange.
  • Для вертикальной ориентации важно задавать высоту.
  • Метки (marks) делают слайдер более наглядным.
  • Диапазоны позволяют управлять интервалами значений.
  • sx и styled дают полную свободу кастомизации внешнего вида.

Горизонтальные и вертикальные слайдеры MUI — гибкие инструменты, которые при правильной настройке подходят для любых пользовательских интерфейсов, где требуется интуитивное управление числовыми значениями.

Оглавление