Ползунок

Ползунок input type="range" представляет собой элемент управления, который позволяет пользователю указать числовое значение. Поле трек — общая длинна диапазона, а бегунок для выбора значения.

Оглавление:
  1. Применить
  2. Поддержка
  3. Отображение ползунка в браузерах
  4. Оформление ползунка

Озеро Самарцы - Отдых в Крыму для всей семьи!
Адрес: Крым, Белогорский район, с. Зуя
Тел: +7(978)1176627 http://samartsy.ru/

Ползунок для числовых значений
Элемент управления nput type=range

Применить

Атрибуты для поля input type="range".

autocomplete
автозаполнение элемента управления
<input type="range" autocomplete>
autofocus
ползунок автоматически получать фокус при загрузке страницы
<input type="range" autofocus>

Браузер Google Chrome добавит контур вокруг поля:

:focus {
    outline: -webkit-focus-ring-color auto 5px;
}

если нужно убрать:

input[autofocus]:focus {
    outline: none;
}
disabled
ползунок отключен
<input type="range" disabled>
list
возвращает значение из списка
<input type="range" list="list-numbers">

<datalist id="list-numbers">
  <option value="0" label="0%">
  <option value="10">
  <option value="20">
  <option value="30">
  <option value="40">
  <option value="50" label="50%">
  <option value="60">
  <option value="70">
  <option value="80">
  <option value="90">
  <option value="100" label="100%">
</datalist>
max
максимальное значение ползунка
<input type="range" max="100">
min
минимальное значение ползунка
<input type="range" min="0">
step
шаг ползунка
<input type="range" step="0.01">
name
имя ползунка
<input type="range" name="trumb">
value
значение ползунка
<input type="range" value="7">
К началу

Поддержка

Таблица поддержки браузерами: “input type=range

Отображение ползунка в браузерах

Браузеры отображают ползунок по разному.

IE

Фантастическое отображение ползунка в браузере Internet Explorer
Ползунок в браузере Internet Explorer

Safari

Умеренное отображение ползунка в браузере Safari
Ползунок в браузере Safari

Chrome

Отображение ползунка в браузере Сhrome
Ползунок в браузере Сhrome

Forefox

Отображение ползунка в браузере Firefox
Ползунок в браузере Firefox

Opera

Отображение ползунка в браузере Opera
Ползунок в браузере Opera
К началу

Оформление ползунка

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

Одинаковое отображение ползунка для браузеровов
Одинаковый вид ползунка для всех браузеров

Общий стиль

input[type=range]{
    -webkit-appearance: none; 
       -moz-appearance: none;
            appearance: none;
        
    border: none; /* FF */
    width: 300px; /* FF */
    padding: 0; /* IE */
}

input[type=range]:focus {
    outline: none;
} 

Для webkit-браузеров

input[type=range]::-webkit-slider-runnable-track {
    width: 300px;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
    margin-top: -4px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
    
}

Для браузера Forefox

input[type=range]::-moz-range-track {
    width: 300px;
    height: 5px;
    background: #ddd;
    border: none;
    border-radius: 3px;
}

input[type=range]::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
}

input[type=range]:-moz-focusring{
    outline: 1px solid white;
    outline-offset: -1px;
}

input[type=range]:focus::-moz-range-track {
    background: #ccc;
}

input[type=range]::-moz-range-progress { 
   background: blue;
}

Для браузера IE10 +

input[type=range]::-ms-track {
    width: 300px;
    height: 5px;
    background: transparent;
    border-color: transparent;
    border-width: 6px 0;
    color: transparent;
}

input[type=range]::-ms-fill-lower {
    background: #777;
    border-radius: 10px;
}

input[type=range]::-ms-fill-upper {
    background: #ddd;
    border-radius: 10px;
}

input[type=range]::-ms-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: goldenrod;
}

input[type=range]:focus::-ms-fill-lower {
    background: #888;
}

input[type=range]:focus::-ms-fill-upper {
    background: #ccc;
}

В IE и Forefox добавлены селекторы для оформления пройденного диапазона ползунка:

  • ::-ms-fill-lower
  • ::-ms-fill-upper
  • ::-moz-range-progress
Стилевое оформление ползунка для браузера IE
Свой ползунок для браузеров IE и FF
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(0 голосов, в среднем: 0 из 5)