В HTML5 вводится новые значения атрибута type, в частности — type="range", который представляет из себя ползунок. Давайте разберем как работать с таким элементом.
Пример использования в коде html:
|
1 |
<input type="range"> |
И результат применения ползунка в коде:
Для работы с ползунком введены следующие атрибуты:
- max — максимальное значение элемента (соответствует крайнее правое положение ползунка). Число.
- min — минимальное значение элемента (соответствует крайнее левое положение ползунка). Число.
- step — шаг ползунка. Число.
Пример применения атрибутов, представлен ниже.
|
1 |
<input type="range" min="100" max="200" step="2"> |
Кроме того, как и с любым элементов HTML к input type="range" можно применить оформление CSS.
Как работать с ползунком в JS
Поскольку ползунок — это элемент Input, то для считывания его значения можно применять свойство value. В следующем примере мы будем считывать значение ползунка и выводить его в абзац.
|
1 2 3 4 5 |
function fun1() { var rng=document.getElementById('r1'); //rng - это Input var p=document.getElementById('one'); // p - абзац p.innerHTML=rng.value; } |
See the Pen input type=»range» by Alex (@luschenko) on CodePen.
Обратите внимание на новое событие oninput. Событие OnInput — срабатываем при любом изменении в элементе формы, например при вводе нового символа, или при перемещении ползунка на 1px. В отличие от события OnChange — которое срабатываем только при потере фокуса элементом, oninput срабатываем при любом изменении в элементе. Данное событие добавляет ползунку интерактивности.
Событие onchange также удобно использовать вместе с элементом select.
Практическое задание
Задание 1. Замените событие OnInput в представленном примере на событие onchange. Изучите как изменилось поведение элементов. Когда происходит обновление значения в абзаце?
Задание 2. Задайте ползунку минимальное значение 50, а максимальное 150. Изучите какое минимальное и максимальное значение выводиться в абзаце?
Задание 3. Задайте шаг ползунка равным 10. Как происходит изменение значений в абзаце?
Задание 4. Задайте шаг изменения значений равным 7. Как измениться максимальное и минимальное значение?
Продолжаем работать с ползунком range
Внимание! Значения считанные из свойства value являются строкой. Не забывайте их переводить в число с помощью функции parseInt(ваша строка).
Давайте решим простую задачу: выведем значение ползунка в input. Для этого необходимо значение свойства ползунок.value передать в свойство input.value. Пример представлен ниже:
|
1 2 3 4 5 |
function fun1() { var rng=document.getElementById('r1'); //rng - это ползунок var i1=document.getElementById('i1'); // i1 - input i1.value=rng.value; } |
See the Pen Input type=»range» & type=»text» by Alex (@luschenko) on CodePen.
Практическое задание
Задание 5. Изучите работу примера приведенного выше. Добавьте в input type="text" событие oninput="fun2()". Для функции fun2 запрограммируйте обратную задачу — те значения которые вводятся в input автоматически присваиваются ползунку.
Для закрепления давайте выполним еще одно задание: с помощью ползунка будем изменять размер блока div. Верстка задачи представлена ниже:
|
1 2 3 |
function fun1() { } |
See the Pen Задача на ползунок и блок (Условие) by Alex (@luschenko) on CodePen.
Для решения задачи нам нужно считать значение ползунка и присвоить его в качестве свойства ширины блока. Код решения представлен ниже:
|
1 2 3 4 5 |
function fun1() { var rng=document.getElementById('r1'); //rng - это Input var div=document.getElementById('test'); // div - блок test div.style.width=rng.value+'px'; } |
See the Pen Задача на блоки и ползунок. Решение by Alex (@luschenko) on CodePen.
Практическое задание
Задание 6. Самостоятельно измените минимальное значение слайдера равное ширине блока.
Задание 7. Добавьте еще один ползунок, который будет изменять значение высоты блока.
