Discrete и continuous слайдеры

Слайдеры в библиотеке MUI предоставляют удобный способ выбора числового значения из заданного диапазона. Основные виды слайдеров — discrete (дискретные) и continuous (непрерывные). Они различаются тем, как пользователь взаимодействует с ползунком и как обрабатываются значения.

Continuous Slider

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

Ключевые свойства:

  • value — текущее значение слайдера. Может быть числом или массивом чисел для диапазона.
  • onChange — функция-обработчик, вызываемая при каждом изменении значения. Получает два аргумента: событие и новое значение.
  • min и max — границы диапазона значений.
  • step — шаг изменения значения. Для continuous-слайдера этот параметр часто равен 1 или 0.1, но может быть опущен для максимально плавного движения.

Пример:

import Slider from '@mui/material/Slider';
import { useState } from 'react';

function ContinuousSliderExample() {
  const [value, setValue] = useState(30);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <Slider
      value={value}
      onCha nge={handleChange}
      min={0}
      max={100}
      step={1}
    />
  );
}

Особенность continuous-слайдера в том, что изменение значения происходит в реальном времени, что делает его удобным для визуальных эффектов, таких как регулировка громкости, прозрачности или масштабирования элементов интерфейса.

Discrete Slider

Discrete Slider ограничивает значения конкретными шагами. Пользователь может выбрать только заранее определённые числа или позиции.

Ключевые свойства:

  • marks — массив объектов { value, label }, задающий метки и шаги на шкале.
  • step — шаг между значениями. Для дискретного слайдера обязательное значение, чтобы пользователь не мог выбрать произвольное число.
  • valueLabelDisplay — отображение текущего значения. Возможные варианты: auto, on, off.

Пример с метками:

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' },
];

function DiscreteSliderExample() {
  return (
    <Slider
      defaultValue={20}
      step={10}
      marks={marks}
      valueLabelDisplay="on"
      min={0}
      max={100}
    />
  );
}

Дискретный слайдер удобен там, где допустимы только конкретные значения: уровни громкости, количество предметов, оценочные шкалы.

Работа с диапазонами

Оба типа слайдеров поддерживают выбор диапазона значений с помощью массива [minValue, maxValue]. Для этого используется свойство value и соответствующая настройка функции onChange.

Пример диапазона:

const [range, setRange] = useState([20, 50]);

<Slider
  value={range}
  onCha nge={(e, newRange) => setRange(newRange)}
  valueLabelDisplay="auto"
  min={0}
  max={100}
  step={5}
/>

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

  • color — цвет слайдера (primary, secondary, или кастомный через sx).
  • size — размер слайдера (small или medium).
  • orientation — вертикальная или горизонтальная ориентация (horizontal по умолчанию).
  • marks и valueLabelDisplay позволяют улучшить визуальное восприятие дискретных значений.
<Slider
  defaultValue={30}
  step={10}
  marks
  valueLabelDisplay="auto"
  color="secondary"
  orientation="vertical"
/>

Сравнение Discrete и Continuous

Свойство Continuous Discrete
Выбор значения Любое число Только шаги/метки
Использование Регулировка параметров Конкретные уровни
Метки (marks) Опционально Обязательно для наглядности
Отображение значения Необязательно Часто используется
Шаг (step) Может отсутствовать Обязателен

Обработка событий

MUI-слайдеры поддерживают два типа событий:

  • onChange — срабатывает в процессе перемещения ползунка, возвращая текущее значение.
  • onChangeCommitted — срабатывает после окончания перемещения, что удобно для отправки значений на сервер или изменения состояния приложения без лишних рендеров.
<Slider
  value={value}
  onCha nge={(e, val) => setValue(val)}
  onChangeCommit ted={(e, val) => console.log("Committed:", val)}
/>

Это позволяет оптимизировать производительность при сложных вычислениях или анимациях.

Использование с формами

Слайдеры можно интегрировать с формами через react-hook-form или formik. Для этого MUI предоставляет возможность контролировать значение через пропсы value и onChange.

Пример с react-hook-form:

import { useForm, Controller } from 'react-hook-form';
import Slider from '@mui/material/Slider';

function FormWithSlider() {
  const { control, handleSubmit } = useForm({
    defaultValues: { volume: 50 }
  });

  const onSub mit = data => console.log(data);

  return (
    <form onSub mit={handleSubmit(onSubmit)}>
      <Controller
        name="volume"
        control={control}
        render={({ field }) => (
          <Slider {...field} min={0} max={100} step={5} valueLabelDisplay="auto" />
        )}
      />
      <button type="submit">Submit</button>
    </form>
  );
}

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

  • Continuous — когда важна плавность и точная настройка значения.
  • Discrete — когда допустимы только определённые значения, или нужно визуально акцентировать шаги.
  • Использовать marks для наглядности на дискретных слайдерах.
  • Применять onChangeCommitted для оптимизации вычислений и сетевых запросов.
  • Настраивать цвет, размер и ориентацию через стандартные пропсы или sx для соответствия стилю интерфейса.

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

Оглавление