SliderСлайдер

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

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

При необходимости импортируйте компонент:

import 'mdui/components/slider.js';

При необходимости импортируйте типы TypeScript:

import type { Slider } from 'mdui/components/slider.js';

Пример использования:

<mdui-slider></mdui-slider>

Через JavaScript-свойство labelFormatter можно изменить формат отображения текстовой подсказки. Значение этого свойства — функция, которая принимает текущее значение слайдера и возвращает строку для отображения.

<mdui-slider class="example-label-formatter"></mdui-slider>

<script>
  const slider = document.querySelector(".example-label-formatter");
  slider.labelFormatter = (value) => `${value} часов`;
</script>

Исходный код

API

Свойства

Атрибут	Свойство	Тип	По умолчанию
`value`	`value`	`number`	`0`
Значение слайдера, будет отправлено вместе с данными формы.
	`defaultValue`	`number`	`0`
Значение по умолчанию. При сбросе формы восстанавливается именно оно. Это свойство задаётся только через JavaScript.
`autofocus`	`autofocus`	`boolean`	`false`
Определяет, будет ли элемент автоматически получать фокус после загрузки страницы.
`tabindex`	`tabIndex`	`number`	-
Порядок перехода к элементу при нажатии клавиши Tab.
`min`	`min`	`number`	`0`
Минимальное значение ползунка, по умолчанию `0`.
`max`	`max`	`number`	`100`
Максимальное значение ползунка, по умолчанию `100`.
`step`	`step`	`number`	`1`
Шаг изменения значения, по умолчанию `1`.
`tickmarks`	`tickmarks`	`boolean`	`false`
Определяет, добавлять ли отметки делений.
`nolabel`	`nolabel`	`boolean`	`false`
Определяет, скрывать ли текстовую подсказку.
`disabled`	`disabled`	`boolean`	`false`
Определяет, отключён ли ползунок.
`form`	`form`	`string`	-
Связанный элемент `<form>`. В качестве значения укажите `id` элемента `<form>` на той же странице. Если свойство не задано, элемент должен быть дочерним по отношению к `<form>`. С этим свойством элемент можно разместить в любом месте страницы, а не только внутри `<form>`.
`name`	`name`	`string`	`''`
Имя ползунка, которое будет отправлено вместе с данными формы.
	`validity`	`ValidityState`	-
Объект, содержащий состояние валидации формы. См. `ValidityState`.
	`validationMessage`	`string`	-
Если проверка формы не пройдена, это свойство содержит сообщение об ошибке. Если проверка пройдена, это свойство будет пустой строкой.
	`labelFormatter`	`(value: number) => string`	-
Функция для форматирования отображаемой метки. Функция принимает текущее значение ползунка и возвращает нужный текст для отображения.

Методы

Название	Параметры	Возвращаемое значение
`click`		`void`
Имитирует щелчок мыши по элементу.
`focus`	`options: FocusOptions` (Опционально)	`void`
Устанавливает фокус на текущий элемент. В качестве аргумента можно передать объект со свойством: `preventScroll`: по умолчанию после получения фокуса страница прокручивается, чтобы элемент появился в области видимости. Чтобы этого избежать, задайте для этого свойства значение `true`.
`blur`		`void`
Убирает фокус с текущего элемента.
`checkValidity`		`boolean`
Проверяет, прошло ли поле формы валидацию. Если не прошло, возвращает `false` и вызывает событие `invalid`; если прошло, возвращает `true`.
`reportValidity`		`boolean`
Проверяет, прошло ли поле формы валидацию. Если не прошло, возвращает `false` и вызывает событие `invalid`; если прошло, возвращает `true`. Если проверка не пройдена, также отображает сообщение об ошибке валидации в компоненте.
`setCustomValidity`	`message: string`	`void`
Устанавливает пользовательский текст сообщения об ошибке. Пока задан непустой текст, поле считается не прошедшим проверку.

События

Название
`focus`
Срабатывает при получении фокуса.
`blur`
Срабатывает при потере фокуса.
`change`
Срабатывает при изменении значения и потере фокуса.
`input`
Срабатывает при изменении значения.
`invalid`
Возникает, когда поле формы не проходит валидацию.

CSS Parts

Название
`track-inactive`
Неактивная часть дорожки.
`track-active`
Активная часть дорожки.
`handle`
Ручка.
`label`
Текст подсказки.
`tickmark`
Отметка деления.

Предыдущая глава

SegmentedButton Сегментированная кнопка

Следующая глава

Snackbar Снэкбар

SliderСлайдер

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

Примеры

Значение по умолчанию

Отключенное состояние

Диапазон

Шаг

Деления

Скрытие подсказки

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

API

Свойства

Методы

События

CSS Parts