Как сделать ползунок в html


Как сделать ползунок в html

Как сделать ползунок в html

Как сделать ползунок в html



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

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

<input type="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; }

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

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

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

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; }

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

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

В браузере 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, для каждого браузера свой.

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Последние новости категории:

Похожие статьи

Популярные статьи:

Добавить комментарий

Метки: , , , ,


Источник: http://bloggood.ru/vebmasteru/polzunok-v-html-oformlenie-i-vyvod-znacheniya.html/


Как сделать ползунок в html фото


Как сделать ползунок в html

Как сделать ползунок в html

Как сделать ползунок в html

Как сделать ползунок в html

Как сделать ползунок в html

Как сделать ползунок в html

Как сделать ползунок в html

Читать топ новости: