Компонент RangeControl из библиотеки @wordpress/components представляет собой слайдер, позволяющий пользователю выбирать значение из заданного диапазона. Этот элемент идеально подходит для настройки параметров, таких как громкость, яркость или размер шрифта, где выбор осуществляется по числовому диапазону с дискретным шагом.
Используйте RangeControl, когда:
- Необходимо предоставить пользователю возможность выбрать значение из определенного числового диапазона.
- Изменения должны немедленно отражаться в интерфейсе (например, изменение громкости или прозрачности).
Примечание:
RangeControlподходит для случаев, когда доступен широкий диапазон значений. Если нужно выбрать только одно из двух значений, рекомендуется использовать переключатель (toggle).
Основные элементы RangeControl
- Rail (Шкала): Представляет всю область выбора значений — от минимального до максимального.
- Track (Полоса): Отображает диапазон от минимального значения до текущего выбранного.
- Thumb (Ползунок): Указывает текущее значение, перемещаясь по шкале.
- Value Entry Field (Поле ввода): Отображает точное числовое значение текущего выбора.
Пример использования RangeControl
Создадим компонент, позволяющий выбирать количество колонок на странице.
import { useState } from 'react';
import { RangeControl } from '@wordpress/components';
const ColumnsRangeControl = () => {
const [columns, setColumns] = useState(2);
return (
<RangeControl
label="Количество колонок"
help="Выберите количество колонок для отображения контента"
value={columns}
onChange={(value) => setColumns(value)}
min={1}
max={6}
/>
);
};
Описание параметров (Props)
Рассмотрим основные параметры компонента RangeControl:
- label:
string
Отображает название слайдера для пользователя.
Обязательный: Нет.
Пример:"Выберите количество колонок". - help:
string | Element
Поясняющий текст, отображаемый под слайдером, который помогает пользователю понять, что именно нужно выбрать.
Обязательный: Нет.
Пример:"Задает количество колонок на странице". - value:
number
Текущее значение, отображаемое на слайдере.
Обязательный: Нет.
Пример:2. - onChange:
(value?: number) => void
Функция обратного вызова, вызываемая при изменении значения.
Обязательный: Да.
Пример:(value) => setColumns(value). - min:
number
Минимально допустимое значение.
Обязательный: Нет.
По умолчанию:0.
Пример:1. - max:
number
Максимально допустимое значение.
Обязательный: Нет.
По умолчанию:100.
Пример:10. - step:
number | 'any'
Шаг изменения значения при перемещении ползунка. Если заданоany, шаг будет произвольным.
Обязательный: Нет.
Пример:1. - allowReset:
boolean
Показывает кнопку сброса, если установленоtrue. При нажатии значение возвращается кresetFallbackValueили становитсяundefined, если значение сброса не указано.
Обязательный: Нет.
По умолчанию:false.
Пример:true. - marks:
Array | boolean
Отображает отметки на шкале. Может быть массивом объектов, где каждый объект определяет метку и ее значение.
Обязательный: Нет.
Пример:
const marks = [
{ value: 0, label: '0' },
{ value: 5, label: '5' },
{ value: 10, label: '10' },
];
- withInputField:
boolean
Если установлено вtrue, отображается поле ввода для точного задания значения.
Обязательный: Нет.
По умолчанию:false. - renderTooltipContent:
(value) => string
Функция, возвращающая текст для отображения при наведении на ползунок.
Обязательный: Нет.
Пример:
const customTooltip = (value) => `${value}%`;
Пример с дополнительными настройками
Создадим компонент для управления прозрачностью с помощью RangeControl, используя иконки и настройку цветов.
import { useState } from 'react';
import { RangeControl } from '@wordpress/components';
import { Icon } from '@wordpress/icons';
const OpacityRangeControl = () => {
const [opacity, setOpacity] = useState(50);
return (
<RangeControl
label="Прозрачность"
help="Настройка уровня прозрачности"
value={opacity}
onChange={(value) => setOpacity(value)}
min={0}
max={100}
step={5}
beforeIcon={<Icon icon="visibility" />}
afterIcon={<Icon icon="visibility-off" />}
trackColor="#ddd"
railColor="#333"
showTooltip={true}
renderTooltipContent={(value) => `${value}%`}
/>
);
};
Рекомендации по использованию
- Использование иконок: Иконки можно добавлять перед и после шкалы, что делает интерфейс более информативным.
- Точная настройка: Используйте
withInputField, если пользователю может потребоваться задать точное числовое значение. - Цветовое оформление: Параметры
trackColorиrailColorпозволяют визуально подчеркнуть границы и текущий выбор, делая элемент более читаемым.
Заключение
Компонент RangeControl предоставляет гибкий способ управления числовыми значениями в интерфейсе WordPress. Этот элемент идеален для случаев, когда необходим выбор из диапазона значений, и он легко настраивается под конкретные задачи с помощью параметров, таких как иконки, цвета и пошаговое изменение.