Среди многих новых элементов формы, которые ввел HTML5, диапазон является, возможно, самым странным, но также и самым вообще полезным. Ранее требуя большого кодирования JavaScript или больших усилий и создания многих вариантов разметки и скриптов, для создания ползунков а, сейчас можно создать ползунок который будет отображаться во всех современных браузерах. Для полноценной работы клиент пользователя должен поддерживать html5 разметку.
Ползунок особенно полезен для форм, в которых существуют три условия:
Широкий диапазон чисел одинаково доступных пользователю.
Есть известный верхний и более низкий предел диапазона.
Пользователь, должен, будет "перетаскивать" при этом регулируя диапазон заданых чисел.
Не забывайте о целесообразности создания таких элементов формы. Учитывая параметры, которые пользователь может выбирать, или изменять. Самым оптимальным вариантом приминения такого рода полей формы тогда, когда вы даете пользователю право выбора. В таком случае приминение поля формы с ползунком будет актуальным и практичным.
Пример использования range
<label for=weight>Громкость</label>
<input type=range id=weight min=10 value=10 max=2000 step=100>
Альтернативы – прекрасный выбор вместо того, чтобы заменить ввод чисел, и никакой дополнительной разметки или javasript просто перетянуть ползунок и увидеть результат.
Напротив, возьмите форму заказа ресторана, где у числа гостей есть очевидный верхний и более низкий предел, но пользователь, то хотел выбрать число. В этом случае "перетаскивание" ползунком, чтобы удостовериться, что правильное число мест заказано в течение вечера, было бы не правильною Сделать ввод числа будет намного более соответствующим.
Установка, Доступность И Признаки
На базовом уровне у входа ползунка должно быть по крайней мере три признака: min(самое низкое принятое число), max (самое высокое) и value ( начальное значение). Поля формы должны были связать элементы лейбла, означая, что у диапазона должен также быть признак id в большинстве случаев. Давайте использовать пример регулировки громкости:
Для примера рассмотрим создание поля формы input type range для регулировки громкости.
<label for=fader>Уровень громкости</label>
<input type=range min=0 max=5 value=3 id=fader>
Примечание, у ползунка есть несколько характерных особенностей:
Кнопка ползунка "хватается", поскольку она перемещается. По умолчанию эти пункты моментального изменения соответствуют местоположению целых чисел в диапазоне. Когда выставлено, кнопка может быть перемещена с/вниз клавишами курсора, точно так же как ввод числа. (Не все браузеры поддерживают это все же). Степень ползунка не изменяется согласно значения max; вместо этого, это регулируется, изменяя ширину элемента в CSS. Относительно положение выбраного числа будет подставлено в value на это изменение.
Поведение установленной кнопки ползунка может быть особенно запутывающим, когда минимум и максимум относительно близки. Как пример, хочу предоставить ползунок микшера объема между 0 и 1:
<input type=range min=0 max=1 value=1 id=fader>
Кнопка теперь может выбирать значение без промежуточных положений. Решение состоит в том, чтобы ввести больше степени детализации при использовании значения атрибута шага: "step"
<input type=range min=0 max=1 value=1 id=fader step=".05">
Примечание, что точно так же как ввод числа, шаг может использоваться, чтобы позволить только определенные целые числа в диапазоне: можно принять только четные числа между min и max, устанавливая step=2, например. Также отметьте, что использование коротких путей HTML5 ограничивается в этом случае: следует использовать кавычки вокруг чисел как 0.5 для примера, чтобы все работало правильно. Ценность в выставлении шага заставляет ползунок выбрать число с плавающей запятой, и является самым прекрасным уровнем контроля. Но мы то не имеем возможности видеть, а какое именно мы значение выбрали. Давайте прибегним к маленькой хитрости и добавим немного javascript, и посмотрим диапазон чисел который мы выбираем перетаскивая ползунок вверх или вниз.
Рассмотрим пример
<label for=fader>Volume</label>
<input type=range min=0 max=100 value=50 id=fader step=1 onchange="outputUpdate(value)">
<output for=fader id=volume>50</output>
<script>
function outputUpdate(vol) {
document.querySelector('#volume').value = vol;
}
</script>
Примечание: браузер firefox - не поддерживает автоматичесский подхват значений поля range, а именно число которое подставилось в value значение формы, до того пока вы не бросите ползунок. Это конечно недостаток браузера.
Вертикальное расположение ползунка
Присвоение вертикального положения ползунку будет иногда иметь смысл: большинство пользователей думает об расположении как и "вертикально", например, а не от стороны к стороне. Разумное расположение состоит в том, что использование, преобразования CSS вращали бы элемент правильно, но это не будет работать как ожидалось. Для валидации и адаптации поля формы range используем css позиционирование для таких браузеров:
В Firefox это - slider-vertical;
В Webkit это - CSS: - -webkit-appearance:
И для IE, есть довольно отличное решение: writing-mode: bt-lr;
Объединение всех трех произвело бы следующее:
input.vertical { -webkit-appearance: slider-vertical; writing-mode: bt-lr; }
<input type=range min=0 max=100 value=50 class=vertical orient=vertical>
Результат Вы видите в правой части параграфа
Моделирование Ползунка
Вид ползунка может быть настроено полностью в CSS, используя множество псевдоотборщиков:
input[type=range], ::-moz-range-track, ::-ms-track {
-webkit-appearance: none;
background-color: #3f91e5;
width: 250px;
height:20px;
}
В этом пункте может быть настроена кнопка ползунка:
::-webkit-slider-thumb, ::-moz-range-thumb, ::-ms-thumb {{
-webkit-appearance: none;
background-color: #666;
width: 10px;
height: 20px;
}
При правельном использовании ползунков и применения к ним стилей можно добиться валидного отображения их в разных браузерах
Возможности HTML5 учитывает особенно умную особенность:подключение элемента к datalist с числовыми значениями через выбор из списка создаст ряд вариантов вдоль бара ползунка с положением каждого нажатия, определенного выбором в datalist.
Например, изменение нашего аудио контроля:
<label for=fader>Volume</label>
<input type=range min=0 max=100 value=50 id=fader step=20 list=volsettings>
<datalist id=volsettings>
<option>0</option>
<option>20</option>
<option>40</option>
<option>60</option>
<option>80</option>
<option>100</option>
</datalist>
На этой ноте завершу сегодняшнюю публикацию. Надеюсь материал станет вам полезным. Есть вопросы пожалуйста задавайте в комментариях, я всегда всем отвечаю.