
Сегодня узнал о нововведении в html5, а именно теперь можно в наш код прописать ползунок(или как его еще называют скроллер) который будет выдавать нам значения в виде цифр. В статье постараюсь описать все, что можно сотворить с этой «деталькой» нашего сайта 🙂
Прописываем и настраиваем ползунок в HTML 5
В основном цель ползунка выводить числа в определенном диапазоне, особенно когда на не нужна точность.
В код добавляется следующая конструкция:
1 |
<input type="range" max="10" min="1" value="5" step="1"> |
Разберем все значения по порядку:
- type=»range» — указываем тип формы, в нашем случае ползунок
- min=»1″ — это минимальное число, которое может принять форма. Стандарт 0.
- max=»10″ — максимальное число, которое принимает форма. По умолчанию 100.
- step=»1″ — шага изменения чисел, стандарт 1
- value=»5″ — первоначальное положение ползунка.
Вычисляется последние по следующей формуле:
При условии, что max меньше min, value будет равняться min. Все атрибуты не являются обязательными, следовательно их можно опустить, при этом они будут равняться стандартным значениям.
К сожалению на данный момент ползунок не передерживаться браузерами IE и Firefox, в них отображаться простое поле с значением value. В остальных он выглядит вот так:
В следующей статье я расскажу как настроить input type range в CSS, ждите обновлений 🙂