Всем привет!
Сделать ползунок в 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>
Результат:
Как оформить ползунок?
Итак, мы имеем стандартный ползунок, и отображается он на каждом браузере по-разному:
Приступим к изменению вида
В браузерах 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, для каждого браузера свой.
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
-
Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 330341 -
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274700 -
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 222520 -
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 187696 -
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186564
5 Ответов на комментарий - Ползунок в HTML (оформление и вывод значения)
Добавить комментарий
Метки: css, html, javascript, Вебмастеру, для сайта
Очень интересная идея! Спасибо!
Попробовал реализовать – все получилось.
Еще бы, ведь очень наглядно все расписано.
Теперь вот думаю, для каких целей применить симпатичный ползунок…
Пожалуйста, Николай!
Ползунок можно использовать для фильтров по цене, для настроек. Я даже думаю, если по фантазировать, то и капчу можно сделать из ползунка )))
Спасибо. Ваш способ вывода результатов средсвами JS заработал. Через output не заработало с донатом от яндекс денег.
Добрый день, Степан!
Подскажи пожалуйста, как в дополнение к изменённому стандартному стилю input ENGINE=’range’ добавить шкалу
. Потому что, когда отключаешь стандартный вид, то она пропадает, а с ней было бы интересней.
Заранее спасибо!
Здравствуйте, Евгений!
Если можно, опубликуйте Ваш готовый код в комментариях, я посмотрю и подскажу.