Настройка меток на слайдере

MUI (Material-UI) предоставляет компонент Slider, который позволяет пользователям выбирать значение из диапазона с помощью ползунка. Одной из ключевых возможностей является настройка меток (marks) — визуальных отметок на шкале слайдера, которые помогают пользователю ориентироваться в выборе значения.

Основные свойства для работы с метками

  • marks — массив объектов, определяющих положение и подписи меток. Формат объекта:

    { value: число, label: строка }
    • value — положение метки на шкале (должно находиться между min и max).
    • label — текст метки, который будет отображаться на шкале.

  • step — шаг слайдера. Если нужно, чтобы метки совпадали с шагами, важно правильно настроить это свойство.

  • valueLabelDisplay — определяет, как отображать значение ползунка:

    • "off" — значения не показываются;
    • "on" — значения всегда отображаются;
    • "auto" — значения показываются при взаимодействии с ползунком.

Пример базовой настройки меток

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

const marks = [
  { value: 0, label: '0°C' },
  { value: 20, label: '20°C' },
  { value: 37, label: '37°C' },
  { value: 100, label: '100°C' },
];

<Slider
  defaultValue={20}
  step={10}
  marks={marks}
  min={0}
  max={100}
  valueLabelDisplay="auto"
/>

В этом примере:

  • Метки расположены в точках 0, 20, 37 и 100.
  • Шаг слайдера равен 10, что позволяет пользователю выбирать промежуточные значения.
  • Значение ползунка отображается при взаимодействии.

Настройка динамических меток

Можно создавать метки программно, используя массивы или функции. Например, для слайдера с метками каждые 10 единиц:

const marks = Array.from({ length: 11 }, (_, i) => ({
  value: i * 10,
  label: `${i * 10}`
}));

<Slider
  defaultValue={50}
  step={10}
  marks={marks}
  min={0}
  max={100}
  valueLabelDisplay="auto"
/>

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

Полная кастомизация меток

Для изменения внешнего вида меток используется проп sx или стиль через styled:

<Slider
  defaultValue={40}
  step={10}
  marks={marks}
  min={0}
  max={100}
  valueLabelDisplay="auto"
  sx={{
    '& .MuiSlider-markLabel': {
      fontSize: '14px',
      color: 'blue',
      transform: 'rotate(-45deg)'
    },
    '& .MuiSlider-mark': {
      backgroundColor: 'red',
      height: 8,
      width: 2
    }
  }}
/>
  • & .MuiSlider-markLabel — настройка текста меток: цвет, размер, поворот.
  • & .MuiSlider-mark — настройка визуального отображения отметок на шкале.

Интервальные метки и сложные кейсы

Можно создавать метки с динамическим отображением, используя условные конструкции:

const marks = [];
for (let i = 0; i <= 100; i += 10) {
  marks.push({
    value: i,
    label: i % 20 === 0 ? `${i}` : ''
  });
}

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

Взаимодействие с диапазоном (range slider)

Слайдер MUI поддерживает диапазон значений, используя массив value:

<Slider
  value={[20, 80]}
  min={0}
  max={100}
  step={5}
  marks={marks}
  valueLabelDisplay="on"
/>
  • Массив [20, 80] задаёт начальный диапазон.
  • Метки будут отображаться одинаково для обеих ручек слайдера.
  • Можно динамически менять массив marks, чтобы отражать только допустимые значения диапазона.

Итоговая структура

  • marks — ключевое свойство для создания визуальных меток.
  • valueLabelDisplay — управляет отображением текущего значения.
  • sx или styled — позволяют кастомизировать стиль меток и отметок.
  • Динамические и интервальные метки обеспечивают гибкость при сложных требованиях интерфейса.
  • Поддержка диапазона позволяет создавать сложные контролы с двумя ползунками.

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

Оглавление