BloGGood.ru

Блог Костаневича Степана

WordPress, PHP, HTML, CSS, Windows

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

Главная » Вебмастеру » Ползунок в 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;
}

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

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

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

Получай обновления блога!!! Подпишись:

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

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

  1. Николай Гижицкий

    Очень интересная идея! Спасибо!
    Попробовал реализовать – все получилось.
    Еще бы, ведь очень наглядно все расписано.
    Теперь вот думаю, для каких целей применить симпатичный ползунок… :)

  2. Avatar photo Степан => автор блога

    Пожалуйста, Николай!
    Ползунок можно использовать для фильтров по цене, для настроек. Я даже думаю, если по фантазировать, то и капчу можно сделать из ползунка )))

  3. ALRER MIND

    Спасибо. Ваш способ вывода результатов средсвами JS заработал. Через output не заработало с донатом от яндекс денег.

  4. Евгений

    Добрый день, Степан!
    Подскажи пожалуйста, как в дополнение к изменённому стандартному стилю input ENGINE=’range’ добавить шкалу

    <datalist><option>.....</option></datalist>

    . Потому что, когда отключаешь стандартный вид, то она пропадает, а с ней было бы интересней.
    Заранее спасибо!

  5. Avatar photo Степан => автор блога

    Здравствуйте, Евгений!
    Если можно, опубликуйте Ваш готовый код в комментариях, я посмотрю и подскажу.

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: , , , ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 810
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4716