Slider для выбора диапазона

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

Базовое подключение компонента осуществляется через импорт:

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

Создание простого слайдера выглядит так:

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

Параметры ключевые:

  • defaultValue – значение по умолчанию.
  • value – текущее управляемое значение (если слайдер контролируемый).
  • onChange – функция, вызываемая при изменении значения.
  • step – шаг изменения значения.
  • min и max – минимальное и максимальное значения.
  • valueLabelDisplay – способ отображения текущего значения (auto, on, off).

Слайдер для выбора диапазона

Для выбора диапазона используется массив из двух значений:

<Slider
  value={[20, 50]}
  onCha nge={handleChange}
  valueLabelDisplay="auto"
  min={0}
  max={100}
/>

Особенности работы:

  • Первый элемент массива – минимальное значение.
  • Второй элемент массива – максимальное значение.
  • При управлении слайдером через value необходимо корректно реализовать onChange, чтобы обновлять массив значений в состоянии.

Пример с управлением состоянием в функциональном компоненте:

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

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

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

  return (
    <Slider
      value={range}
      onCha nge={handleChange}
      valueLabelDisplay="auto"
      min={0}
      max={100}
    />
  );
}

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

Step и marks позволяют детализировать выбор:

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

<Slider
  value={range}
  onCha nge={handleChange}
  min={0}
  max={100}
  step={10}
  marks={marks}
  valueLabelDisplay="auto"
/>
  • marks – массив объектов с value и необязательным label.
  • Слайдер автоматически «привязывается» к шагам, если указаны step или marks.

Ориентация и размеры

Компонент поддерживает вертикальную ориентацию и различные размеры:

<Slider
  orientation="vertical"
  value={range}
  onCha nge={handleChange}
  min={0}
  max={100}
  size="small"
/>
  • orientation="vertical" – вертикальное отображение.
  • size может быть "small" или "medium" (по умолчанию "medium").

Цвета и стилизация

MUI предоставляет встроенные темы и возможность прямой кастомизации:

<Slider
  value={range}
  onCha nge={handleChange}
  color="secondary"
  sx={{
    width: 300,
    '& .MuiSlider-thumb': {
      backgroundColor: 'blue',
    },
    '& .MuiSlider-track': {
      border: 'none',
    },
  }}
/>
  • color – встроенные варианты (primary, secondary, error, info, success, warning).
  • sx позволяет применять детальную стилизацию через CSS-in-JS.

События и управление

Основные события:

  • onChange – вызывается при каждом движении ползунка, передаёт массив значений для диапазонного слайдера.
  • onChangeCommitted – вызывается только после завершения изменения (например, отпускание мыши).

Пример:

const handleCommitted = (event, newValue) => {
  console.log('Финальное значение:', newValue);
};

<Slider
  value={range}
  onCha nge={handleChange}
  onChangeCommit ted={handleCommitted}
/>

Слайдер с ограничениями

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

<Slider
  value={range}
  onCha nge={handleChange}
  min={0}
  max={100}
  valueLabelDisplay="auto"
  disableSwap={true}
/>
  • disableSwap предотвращает пересечение ползунков.
  • Можно реализовать собственную логику через onChange, чтобы соблюдать минимальный интервал между значениями.

Интеграция с формами

Slider легко интегрируется с библиотеками форм, такими как Formik или React Hook Form. Для этого используется управляемое значение value и обработчики событий onChange.

Пример с React Hook Form:

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

const { control, handleSubmit } = useForm({
  defaultValues: { range: [10, 50] },
});

<Controller
  name="range"
  control={control}
  render={({ field }) => (
    <Slider
      {...field}
      value={field.value}
      onCha nge={(e, val) => field.onChange(val)}
      valueLabelDisplay="auto"
      min={0}
      max={100}
    />
  )}
/>

Такой подход позволяет интегрировать диапазонный слайдер в сложные формы и сохранять значения для отправки на сервер.

Этот материал охватывает все основные аспекты работы с диапазонным слайдером MUI: от базовой установки и управления состоянием до стилизации, ориентации и интеграции с формами.

Оглавление