Ползунок

range
sm
md
lg
xl

В SIMAI Framework с помощью модификаторов можно костомизировать элементы форм

Описание

Используйте наши входы настраиваемого диапазона для согласованного кросс-браузерного стиля и встроенной настройки.

Обзор

Создайте пользовательские элементы управления input type="range" с помощью .form-range. Дорожка (фон) и ползунок (значение) имеют одинаковый стиль во всех браузерах. Поскольку только Edge Legacy и Firefox поддерживают «заполнение» своей дорожки слева или справа от большого пальца в качестве средства визуальной индикации прогресса, в настоящее время мы не поддерживаем это.

<label for="customRange1" class="inline-block m-bottom-1/3">
    Пример ползунка
</label>
<input type="range" class="w-full p-0 bg-transparent appearance-none t-inherit string-inherit webkit-slider-runnable-track:w-full webkit-slider-runnable-track:c-transparent
webkit-slider-runnable-track:bg-surface-2 webkit-slider-runnable-track:b-transparent
webkit-slider-thumn:b-0 webkit-slider-thumb:appearance-none webkit-slider-runnable-track:cursor-pointer webkit-slider-runnable-track:h-a8 webkit-slider-thumb:w-b6 webkit-slider-thumb:h-b6 webkit-slider-thumn:-mt-1 webkit-slider-thumn:r-3 webkit-slider-runnable-track:r-3 active:webkit-slider-thumn:bg-primary webkit-slider-thumn:bg-blue webkit-slider-thumn:transition" id="customRange1">

Отключено

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

<label for="disabledRange" class="inline-block m-bottom-1/3">
    Выключенный ползунок
</label>
<input type="range" class="w-full p-0 bg-transparent appearance-none t-inherit string-inherit webkit-slider-runnable-track:w-full webkit-slider-runnable-track:c-transparent
webkit-slider-runnable-track:bg-surface-2 webkit-slider-runnable-track:b-transparent
webkit-slider-thumn:b-0 webkit-slider-thumb:appearance-none disabled:webkit-slider-thumb:bg-surface-4 webkit-slider-runnable-track:h-a8 webkit-slider-thumb:w-b6 webkit-slider-thumb:h-b6 webkit-slider-thumn:-mt-1 webkit-slider-thumn:r-3 webkit-slider-runnable-track:r-3" id="disabledRange" disabled>

Минимальное и максимальное

Входные данные диапазона имеют неявные значения для min и max - 0 и 100 соответственно. Вы можете указать новые значения для тех, кто использует атрибуты min и max. 

<label for="customRange2" class="inline-block m-bottom-1/3">Пример ползунка</label>
<input type="range" class="w-full p-0 bg-transparent appearance-none t-inherit string-inherit webkit-slider-runnable-track:w-full webkit-slider-runnable-track:c-transparent
webkit-slider-runnable-track:bg-surface-2 webkit-slider-runnable-track:b-transparent
webkit-slider-thumn:b-0 webkit-slider-thumb:appearance-none webkit-slider-runnable-track:cursor-pointer webkit-slider-runnable-track:h-a8 webkit-slider-thumb:w-b6 webkit-slider-thumb:h-b6 webkit-slider-thumn:-mt-1 webkit-slider-thumn:r-3 webkit-slider-runnable-track:r-3 active:webkit-slider-thumn:bg-primary webkit-slider-thumn:bg-blue webkit-slider-thumn:transition" min="0" max="5" id="customRange2">

Шаги

По умолчанию входные данные диапазона «привязываются» к целочисленным значениям. Чтобы изменить это, вы можете указать значение шага. В приведенном ниже примере мы удваиваем количество шагов, используя step="0.5".

<label for="customRange3" class="inline-block m-bottom-1/3">Пример ползунка</label>
<input type="range" class="w-full p-0 bg-transparent appearance-none t-inherit string-inherit webkit-slider-runnable-track:w-full webkit-slider-runnable-track:c-transparent
webkit-slider-runnable-track:bg-surface-2 webkit-slider-runnable-track:b-transparent
webkit-slider-thumn:b-0 webkit-slider-thumb:appearance-none webkit-slider-runnable-track:cursor-pointer webkit-slider-runnable-track:h-a8 webkit-slider-thumb:w-b6 webkit-slider-thumb:h-b6 webkit-slider-thumn:-mt-1 webkit-slider-thumn:r-3 webkit-slider-runnable-track:r-3 active:webkit-slider-thumn:bg-primary webkit-slider-thumn:bg-blue webkit-slider-thumn:transition" min="0" max="5" step="0.5" id="customRange3">

Адаптивность

Для установки адаптивности элементов формы, начиная с определенного размера области просмотра, добавьте префикс контрольной точки (sm, md, lg, xl) через двоеточие (:) к любому модификатору.

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

Изменить статью