Главная » Вебмастеру » Ползунок в HTML (оформление и вывод значения)

Ползунок в HTML (оформление и вывод значения)

2017-03-19 / Вр:22:41 / просмотров: 42305

Всем привет!
Сделать ползунок в HTML – не проблема, для многих сделать это – проще простого. А вот оформить и красиво вывести значение ползунка умеют не все.
Так вот, в сегодняшней статье я расскажу, как создать ползунок, как вывести результат и как оформить ползунок.

С чего же начнем? Начнем с того, что я покажу, каким тегом создается ползунок, и какие атрибуты у него есть.
Для создания ползунка в HTML существует тег «input»:

<input ENGINE="range">

В результате получится вот такое:

Заметьте, что ручка ползунка всегда находится посредине, а специальным атрибутом это можно изменить, впрочем, не только это.

Атрибуты:

Autocomplete - автозаполнение значения (положения) ползунка.
Autofocus - автоматческая фокусировка на ползунке после полной загрузки страницы.
Disabled - блокировка ползунка. Пример:
```
<input type="range" disabled>
```
Max - указывает максимальное значение ползунка.
Значение по умолчанию: «100».
Min - указывает минимальное значение ползунка.
Значение по умолчанию: «0».
List - создание меток на шкале ползунка.

Пример:

<input type="range" min="0" max="10" list="rangeList1">
<datalist id="rangeList1">
<option value="0" label="0">
<option value="5" label="5">
<option value="10" label="10">
</datalist>

Обратите внимание на имя «rangeList1». Посмотрите, где я его прописал в коде. Это имя может быть любым, но должно быть уникальным и писаться латинскими буквами. Имя в id должно соответствовать имени «list».

Name - присваивает имя ползунку.
Step - устанавливает интервал увеличения значения (перемещения) ползунка.
Значение по умолчанию: «1».
Value - указывает числовое значение ползунка, отправляемое на сервер или используемое сценариями.

Как вывести значение ползунка?

Все, конечно, круто, но какой смысл в ползунке, если он ничего не выводит.
Сейчас мы все исправим и выведем значение средствами JavaScript без какой-либо магии.

onchange="document.getElementById('rangeValue').innerHTML = this.value;"

Вот этот код нужно вставить в ползунок.
Заметьте, если в скобках вы указали «rangeValue», тогда при выводе результата нужно тоже указать это же имя, а иначе работать не будет:

<span id="rangeValue">5</span>

Полный пример:

<input type="range" step="5" min="0" max="10" list="rangeList" onchange="document.getElementById('rangeValue').innerHTML = this.value;">
<datalist id="rangeList">
<option value="0" label="0">
<option value="5" label="5">
<option value="10" label="10">
</datalist>
<span id="rangeValue">5</span>

А вот и результат:

[ посмотреть демонстрацию ]

Также в интернете нашел вот такой способ, как мне показалось, очень интересный:

<form onsubmit="return false" oninput="level.value = flevel.valueAsNumber">
<input name="flevel" id="flying" type="range" min="20" max="10000" value="20" step="10">
<output for="flying" name="level">20</output>
</form>

Результат:

[ посмотреть демонстрацию ]

Как оформить ползунок?

Итак, мы имеем стандартный ползунок, и отображается он на каждом браузере по-разному:

Ползунок в HTML (оформление и вывод значения)

Приступим к изменению вида

В браузерах Chrome, Safari и Opera

Отменим стандартные стили Webkit/Chrome. Для этого зададим свойству «-webkit-appearance» значение «none»:

input[type=range]
{
-webkit-appearance: none
}

Вот теперь можно добавить любые свойства, например, границу, цвет фона, закругление границы и так далее, что только душа пожелает:

input[type=range]::-webkit-slider-runnable-track {
border-radius: 10px;
height: 10px;
border: 1px solid #000;
background-color: #ccc;
}

В результате это выглядит пока что вот так:

Теперь изменим ползунок:

input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #000;
border: 3px solid #0b6b00;
width: 20px;
height: 20px;
border-radius: 10px;
cursor: pointer;
margin-top: -5px;
}

В результате:

В браузере Firefox

Псевдоэлемент «::-moz-range-track» повлияет на полосу ползунка, а «::-moz-range-track» повлияет на ручку ползунка.

Пробуем:

input[type=range]::-moz-range-track
{
border-radius: 10px;
height: 10px;
border: 1px solid #666;
background-color: #ccc;
}

input[type=range]::-moz-range-thumb
{
background-color: #000;
border: 3px solid #0b6b00;
width: 20px;
height: 20px;
border-radius: 20px;
cursor: pointer;
}

В браузере Internet Explorer

Дошла очередь до самого известного и самого корявого, как по мне, браузера Internet Explorer:

input[type="range"]::-ms-track {
border-radius: 10px;
height: 10px;
border: 1px solid #666;
background-color: #ccc;
}

input[type="range"]::-ms-thumb
{
background-color: #000;
border: 3px solid #0b6b00;
width: 20px;
height: 20px;
border-radius: 10px;
cursor: pointer;
}

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