Slider

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

import { Slider } from 'antd';

<Slider defaultValue={30} />

В этом примере создаётся простой ползунок с начальными значением 30. Значение можно изменять с помощью перетаскивания.

Настройка диапазона

Slider может быть одноточечным или диапазонным, если указать свойство range.

<Slider range defaultValue={[20, 50]} />
  • range – включение диапазона.
  • defaultValue – массив из двух чисел для диапазонного слайдера.

Дополнительно можно задать минимальное и максимальное значение через свойства:

<Slider min={0} max={100} step={5} defaultValue={25} />
  • min – минимальное значение ползунка.
  • max – максимальное значение.
  • step – шаг изменения значения. Полезно для дискретных значений.

Управление значением

Slider может быть контролируемым компонентом, где значение задаётся через value и управляется состоянием React:

import React, { useState } from 'react';
import { Slider } from 'antd';

const ControlledSlider = () => {
  const [value, setValue] = useState(50);

  return (
    <Slider
      value={value}
      onCha nge={(val) => setValue(val)}
    />
  );
};
  • value – текущее значение ползунка.
  • onChange – функция обратного вызова, вызывается при изменении значения.

Метки (Marks)

С помощью свойства marks можно добавить числовые или текстовые метки на слайдере.

<Slider
  marks={{ 0: '0%', 50: '50%', 100: '100%' }}
  defaultValue={50}
/>
  • Ключи объекта marks – числовые позиции.
  • Значения – отображаемые подписи.
  • Можно комбинировать с step для создания дискретного слайдера.

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

Для вертикального отображения используется свойство vertical.

<Slider vertical defaultValue={30} style={{ height: 200 }} />
  • style.height – задаёт высоту вертикального слайдера.
  • Полезно для панелей управления, где пространство ограничено по горизонтали.

Настройка Tooltip

По умолчанию при перетаскивании ползунка появляется всплывающая подсказка с текущим значением. Можно управлять её отображением через tooltipVisible и форматирование с помощью tipFormatter.

<Slider
  defaultValue={20}
  tipFormatter={(value) => `${value} ед.`}
/>
  • tipFormatter – функция для кастомного отображения текста.
  • tooltipVisible – принудительное отображение подсказки (true или false).

Слайдер с диапазоном и подсказкой

Для диапазонного слайдера можно форматировать оба значения:

<Slider
  range
  defaultValue={[10, 50]}
  tipFormatter={(value) => `$${value}`}
  step={5}
/>

Каждое значение диапазона получает собственную подсказку.

Стилизация и кастомизация

Slider поддерживает настройку цвета, размера и стиля через className, style и тему Ant Design. Для более сложной кастомизации можно использовать CSS-переменные:

<Slider
  defaultValue={40}
  style={{ width: 300, marginTop: 50 }}
/>

Ant Design также позволяет изменять активный цвет слайдера через переменные LESS или настройку темы в конфиге.

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

Slider интегрируется с компонентом Form.Item, что позволяет использовать его в формах с валидацией.

import { Form, Slider, Button } from 'antd';

<Form onFin ish={(values) => console.log(values)}>
  <Form.Item name="age" label="Возраст" rules={[{ required: true }]}>
    <Slider min={0} max={100} />
  </Form.Item>
  <Button type="primary" htmlType="submit">Отправить</Button>
</Form>
  • name связывает слайдер с полем формы.
  • rules позволяют задавать валидацию значения.
  • После отправки values.age содержит выбранное значение.

Доступность и клавиатурное управление

Slider поддерживает навигацию с клавиатуры:

  • Стрелка влево/вниз – уменьшение значения на step.
  • Стрелка вправо/вверх – увеличение значения на step.
  • Home/End – переход к минимальному/максимальному значению.

Расширенные возможности

  • Reverse – меняет направление слайдера: reverse={true}.
  • Disabled – блокирует ползунок: disabled={true}.
  • dots – отображает дискретные точки: dots={true} для удобства выбора шагов.
<Slider min={0} max={10} step={1} dots defaultValue={5} />
  • dots создаёт визуальные отметки для каждого шага, полезно при небольшом количестве фиксированных значений.

Комбинация с другими компонентами Ant Design

Slider можно использовать вместе с InputNumber для точного задания значения:

import { Slider, InputNumber, Row, Col } from 'antd';
import { useState } from 'react';

const SliderWithInput = () => {
  const [value, setValue] = useState(50);

  return (
    <Row>
      <Col span={12}>
        <Slider
          min={0}
          max={100}
          onCha nge={setValue}
          value={value}
        />
      </Col>
      <Col span={4}>
        <InputNumber
          min={0}
          max={100}
          style={{ marginLeft: 16 }}
          value={value}
          onCha nge={setValue}
        />
      </Col>
    </Row>
  );
};
  • Slider и InputNumber синхронизируются через общее состояние.
  • Позволяет использовать и графическое управление, и точный ввод числа.

Slider в Ant Design — мощный и гибкий компонент для выбора числовых значений, с богатой кастомизацией, поддержкой форм, вертикальной ориентации, диапазонов и интеграции с другими элементами интерфейса. Его свойства позволяют создавать как простые ползунки, так и сложные панели управления значениями.

Оглавление