Ползунок или input type range в HTML5

Сегодня узнал о нововведении в html5, а именно теперь можно в наш код прописать ползунок(или как его еще называют скроллер) который будет выдавать нам значения в виде цифр. В статье постараюсь описать все, что можно сотворить с этой «деталькой» нашего сайта 🙂

Прописываем и настраиваем ползунок в HTML 5

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

В код добавляется следующая конструкция:

Разберем все значения по порядку:

• type=»range» — указываем тип формы, в нашем случае ползунок
• min=»1″ — это минимальное число, которое может принять форма. Стандарт 0.
• max=»10″ — максимальное число, которое принимает форма. По умолчанию 100.
• step=»1″ — шага изменения чисел, стандарт 1
• value=»5″ — первоначальное положение ползунка.

Вычисляется последние по следующей формуле:

При условии, что max меньше min, value будет равняться min. Все атрибуты не являются обязательными, следовательно их можно опустить, при этом они будут равняться стандартным значениям.

К сожалению на данный момент ползунок не передерживаться браузерами IE и Firefox, в них отображаться простое поле с значением  value. В остальных он выглядит вот так:

В следующей статье я расскажу как настроить input type range в CSS, ждите обновлений 🙂