Ползунок
Ползунок предназначен для ввода чисел в указанном диапазоне, но в отличие от поля имеет другой интерфейс и применяется в тех случаях, когда не особенно важно указывать точное значение. На рис. 1 продемонстрирован вид ползунка в разных браузерах.
Рис. 1. Вид ползунка в браузерах
Синтаксис создания ползунка следующий.
Здесь min — минимальное число в диапазоне (по умолчанию 0), max — максимальное число (по умолчанию 100), step — шаг изменения чисел (по умолчанию 1), value — текущее значение. По умолчанию value вычисляется по формуле:
Если значение max меньше, чем значение min , то value равно min .
Атрибуты не являются обязательными, их можно опустить, в таком случае они принимают значения по умолчанию.
Независимо от минимального и максимального числа ширина ползунка остаётся одинаковой.
Сами ползунки редко применяются в «чистом» виде, поскольку не обеспечивают необходимую обратную связь с пользователем, а вот в сочетании с JavaScript это становится мощным и удобным элементом интерфейса. В примере 1 с помощью ползунка изменяется размер изображения, такая возможность часто используется в различных фотогалереях.
Пример 1. Использование ползунка
HTML5 IE 10 Cr Op Sa Fx
Ползунок function sizePic() Размер рисунка:
В данном примере при управлении ползунком срабатывает событие oninput , которое вызывает функцию sizePic . Эта функция изменяет размер изображения в зависимости от установленного пользователем значения ползунка. Тем самым ширина картинки при желании уменьшается или наоборот, увеличивается. Результат примера при крайнем значении ползунка в браузере Chrome показан на рис. 2.
Рис. 2. Управление шириной картинки с помощью ползунка
Старые версии браузеров, которые не поддерживают значение range для атрибута type , отображают поле формы как текстовое.
Как сделать — Ползунки диапазона
Узнать, как создавать пользовательские ползунки диапазона с помощью CSS и JavaScript.
По умолчанию:
Квадрат:
Круг:
Изображение:
Создание ползунка диапазона
Шаг 1) Добавить HTML:
Пример
Шаг 2) Добавить CSS:
Пример
.slidecontainer <
width: 100%; /* Ширина внешнего контейнера */
>
/* Сам ползунок */
.slider -webkit-appearance: none; /* Переопределение стилей CSS по умолчанию */
appearance: none;
width: 100%; /* Полная ширина */
height: 25px; /* Заданная высота */
background: #d3d3d3; /* Серый фон */
outline: none; /* Удалить контур */
opacity: 0.7; /* Установите прозрачность (для эффектов наведения мыши при наведении курсора) */
-webkit-transition: .2s; /* 0.2 секундный переход при наведении курсора */
transition: opacity .2s;
>
/* Эффекты наведения курсора мыши */
.slider:hover opacity: 1; /* Полностью отображается при наведении курсора мыши */
>
/*Ползунок обработчик (использовать -webkit- (Chrome, Opera, Safari, Edge) и -moz- (Firefox) чтобы переопределить внешний вид по умолчанию ) */
.slider::-webkit-slider-thumb -webkit-appearance: none; /* Переопределить внешний вид по умолчанию */
appearance: none;
width: 25px; /* Установите определенную ширину обработчика ползунка */
height: 25px; /* Высота обработчика ползунка */
background: #4CAF50; /* Зеленый фон */
cursor: pointer; /* Курсор при наведении */
>
.slider::-moz-range-thumb width: 25px; /* Установите определенную ширину обработчика ползунка */
height: 25px; /* Высота обработчика подзунка */
background: #4CAF50; /* Зеленый фон */
cursor: pointer; /* Курсор при наведении */
>
Шаг 3) Добавить JavaScript:
Создайте ползунок динамического диапазона для отображения текущего значения с помощью JavaScript:
Пример
var slider = document.getElementById(«myRange»);
var output = document.getElementById(«demo»);
output.innerHTML = slider.value; // Отображение значения ползунка по умолчанию
// Обновите текущее значение ползунка (при каждом перетаскивании маркера ползунка)
slider.oninput = function() output.innerHTML = this.value;
>
Круглый ползунок
Чтобы создать круглый ползунок, используйте свойство border-radius . Совет: Установите высоту ползунка на другое значение, чем ползунок большого пальца, если вы хотите неравные высоты (15px и 25px в этом примере):
Пример
.slider <
-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
background: #d3d3d3;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
>
.slider::-webkit-slider-thumb -webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
>
.slider::-moz-range-thumb width: 25px;
height: 25px;
border-radius: 50%;
background: #4CAF50;
cursor: pointer;
>
Ползунок значок/изображение
Чтобы создать значок/изображение ползунка, используйте свойство background и вставить url адрес изображения:
Пример
.slider::-webkit-slider-thumb <
-webkit-appearance: none;
appearance: none;
width: 23px;
height: 24px;
border: 0;
background: url(‘contrasticon.png’);
cursor: pointer;
>
.slider::-moz-range-thumb width: 23px;
height: 25px;
border: 0;
background: url(‘contrasticon.png’);
cursor: pointer;
>
Значение range
Тип range (от англ. «range» ‒ «диапазон, спектр») создаёт ползунок.
Внешний вид
‒ ползунок;
‒ фокус;
‒ наведение курсора.
Примечание
В большинстве браузеров по умолчанию ручка ползунка всегда находится посередине.
Поддержка браузерами
Спецификация
| Верс. | Раздел |
|---|---|
| HTML | |
| 2.0 | |
| 3.2 | |
| 4.01 | |
| 5.0 | 4.10.5.1.10 Range state (type=range) |
| 5.1 | 4.10.5.1.13. Range state (type=range) |
| XHTML | |
| 1.0 | |
| 1.1 | |
Сопутствующие атрибуты
autocomplete Автозаполнение значения (положения) ползунка. autofocus Автоматческая фокусировка на ползунке после полной загрузки страницы. disabled Блокировка ползунка.
disabled=»disabled»
form Присоединение ползунка к форме. list Создание дополнительных меток на шкале ползунка.
max Указывает, максимальное значение ползунка.
Значение по умолчанию: « 100 ».
min Указывает, минимальное значение ползунка.
Значение по умолчанию: « 0 ».
name Присваивает имя ползунку. step Устанавливает интервал увеличения значения (перемещения) ползунка.
Значение по умолчанию: « 1 ».
value Указывает числовое значение ползунка, отправляемое на сервер или используемое сценариями.
Примечание: Данный атрибут должен иметь значение, являющееся допустимым числом с плавающей точкой.
min=»0″ max=»10″ value=»8″
Ползунок настраиваемого диапазона с использованием HTML, CSS и JavaScript
Вы узнаете, как создать ползунок настраиваемого диапазона с помощью HTML, CSS и JavaScript. Мы видим его на разных типах веб-сайтов электронной коммерции или на разных типах бизнес-сайтов. Этот тип ползунка диапазона HTML используется для выбора определенного значения в ползунке.
Это своего рода функция ввода HTML. HTML имеет много типов ввода, таких как текст, пароль, файл, ползунок и т. д. Этот тип ползунка настраиваемого диапазона имеет минимальное и максимальное значение. Пользователь может выбрать любое из этих значений.
Этот тип ползунка диапазона с минимальным и максимальным значениями очень важен для сайта электронной коммерции. Я использовал анимацию в этом ползунке настраиваемого диапазона. Кнопка, изменяющая значение, разработана с помощью CSS. Вместо кнопок используются эмодзи.
Как создать ползунок настраиваемого диапазона с помощью HTML, CSS
Эмодзи в слайдере могут rotate 360 degrees . Эмодзи будет под углом 0 градусов при минимальном значении ползунка. Он будет вращаться, когда вы измените положение смайлика. Если вы новичок, то этот проект очень важен для вас.
Сначала мы создали базовую структуру ползунка с помощью HTML. Затем для активации этого ползунка настраиваемого диапазона был использован JavaScript.
Этот ползунка можно использовать в дополнение к JavaScript. Однако для активации отображения важен JavaScript. Значение дисплея изменится, когда вы измените положение кнопки на ползунке.
Чтобы сделать этот настраиваемый ползунка диапазона, вам необходимо иметь базовое представление о HTML и CSS. Я представил демонстрацию, которая поможет вам узнать больше об этом ползунке настраиваемого диапазона.
Шаг 1. Базовая структура ползунка настраиваемого диапазона
Пришло время создать базовую структуру ползунка настраиваемого диапазона. Мы знаем, что ползунок настраиваемого диапазона создается с помощью функции ввода. Здесь я впервые создал ползунок настраиваемого диапазона, используя ввод и спроектированный с использованием некоторого количества CSS.
Таким образом, с помощью уровня была создана небольшая коробка. Всю информацию можно найти в этом поле. Это означает, что значение этого дисплея изменится, когда вы измените положение кнопки ползунка.
html, body < margin: 0; height: 100%; >body
Шаг 2. Создайте дисплей для просмотра значений
Теперь я спроектировал уровень, т.е. следующие коды были использованы для разработки отображения представления значений. Я сделал небольшую коробку с белым фоном. Здесь используется синий цвет текста.
label
Шаг 3. Используйте изображения вместо кнопок-ползунков
Теперь ползунок настраиваемого диапазона разработан. Здесь использован прозрачный фон ползунка. Позже я использовал для этого другой фон. Здесь вместо кнопки «Ползунок диапазона» используется смайлик.
Как я уже говорил, смайлы использовались для придания красоты. Этот смайлик будет действовать как кнопка. Мы знаем, что в случае обычного ползунка диапазона кнопку можно перемещать. Здесь также значение диапазона будет изменено путем перемещения изображения.
Как упоминалось ранее, эта кнопка может rotate 360 . Но эта работа была сделана с помощью JavaScript.
input[type="range"] < -webkit-appearance: none; background: transparent; width: 90%; max-width: 500px; outline: none; >input[type="range"]:focus, input[type="range"]:active < border: 0; outline: none; >input[type="range"]::-webkit-slider-thumb < border: none; height: 40px; width: 40px; background-color: transparent; background-image: url("https://cdn.pixabay.com/photo/2020/09/14/18/34/amazed-5571740_1280.png"); background-position: 0 0; background-size: cover; transform: scale(1.9) rotateZ(var(--thumb-rotate, 10deg)); cursor: pointer; margin-top: -15px; -webkit-appearance: none; >input[type="range"]::-webkit-slider-thumb:active
Шаг 4: Создайте работающую дорожку ползунка диапазона
Теперь этот ползунок создал беговую дорожку. Это означает, что фон слайдера был разработан. Фон выполнен в белом цвете, на котором будет продолжаться изображение.
input[type="range"]::-webkit-slider-runnable-track
Шаг 5. Активируйте ползунок настраиваемого диапазона с помощью JavaScript
Пришло время активировать отображение на этом слайде и расположить смайлики так, чтобы они вращались на 360 градусов. В результате изменение положения изображения изменит значение отображения. При этом смайлик будет вращаться на 360 градусов при каждом изменении.
Сначала я устанавливаю ввод и уровень, то есть константу изображения и дисплея, один за другим. Потому что мы не можем использовать какие-либо функции HTML непосредственно в JavaScript.
const input = document.querySelector("input"); const label = document.querySelector("label"); input.addEventListener("input", event => < const value = Number(input.value) / 100; input.style.setProperty("--thumb-rotate", `$deg`); label.innerHTML = Math.round(value * 50); >); 
Надеюсь, из этого руководства вы узнали, как создать ползунок настраиваемого диапазона с помощью HTML, CSS и JavaScript.