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

Индикаторы (теги progress и meter), ползунок <input type="range"/> | CSS и HTML

progress (w3.org) показывает процент завершения работ. Например, степень заполнения формы или загрузки страницы.

<progress value="30" max="100"> 30% </progress>

Как изменить его стиль CSS, например, для резиновой вёрстки:

Тег meter HTML

meter (w3.org) определяет цифровое значение в неком диапазоне. В зависимости от положения на шкале линия будет принимать разный цвет.

110 <meter min="-200" low="0" high="100" max="150" optimum meter">120 " value="110"> 110 </meter>
50 <meter min="-200" low="0" high="100" max="150" optimum meter">120 " value="50"> 50 </meter>
-100 <meter min="-200" low="0" high="100" max="150" optimum meter">120 " value="-100"> -100 </meter>
-200 <meter min="-200" low="0" high="100" max="150" optimum meter">120 " value="-200"> -200 </meter>

атрибут описание по умолчанию
min самое низкое значение 0
low с min до low — диапазон низких значений; с low до high — диапазон средних значений min
high с low до high — диапазон средних значений; с high до max — диапазон высоких значений max
max самое высокое значение 1.0
optimum определяет предпочтительную окраску диапазонов. Для того, чтобы понять о чём речь, поменяем его значение (max+min)/2
value текущее значение 0

Стилизацию можно посмотреть у css-tricks.com.

Ползунок HTML

<input type="range"/> (w3.org) в отличии от предыдущих двух элементов может изменяться самим пользователем благодаря перетаскиванию ползунка курсором мышки.

<input type="range" min="10" max="120" step="5" value="30"/>

атрибут описание по умолчанию
value текущее значение (max+min)/2
min самое низкое значение 0
max самое высокое значение 100
step шаг изменения значения 1
list нет поддержки браузерами

Его можно стилизовать благодаря псевдоэлементам CSS и сделать интерактивные динамические штучки на сайте благодаря JavaScript. Например, здесь получилось наглядно и просто продемонстрировать действие свойства border-image-slice.

Ползунок

Ползунок предназначен для ввода чисел в указанном диапазоне, но в отличие от поля <input type="number"> имеет другой интерфейс и применяется в тех случаях, когда не особенно важно указывать точное значение. На рис. 1 продемонстрирован вид ползунка в разных браузерах.

Вид ползунка

Рис. 1. Вид ползунка в браузерах

Синтаксис создания ползунка следующий.

Здесь min — минимальное число в диапазоне (по умолчанию 0), max — максимальное число (по умолчанию 100), step — шаг изменения чисел (по умолчанию 1), value — текущее значение. По умолчанию value вычисляется по формуле:

Если значение max меньше, чем значение min , то value равно min .

Атрибуты не являются обязательными, их можно опустить, в таком случае они принимают значения по умолчанию.

Независимо от минимального и максимального числа ширина ползунка остаётся одинаковой.

Сами ползунки редко применяются в «чистом» виде, поскольку не обеспечивают необходимую обратную связь с пользователем, а вот в сочетании с JavaScript это становится мощным и удобным элементом интерфейса. В примере 1 с помощью ползунка изменяется размер изображения, такая возможность часто используется в различных фотогалереях.

Пример 1. Использование ползунка

HTML5 IE 10 Cr Op Sa Fx

В данном примере при управлении ползунком срабатывает событие oninput , которое вызывает функцию sizePic . Эта функция изменяет размер изображения в зависимости от установленного пользователем значения ползунка. Тем самым ширина картинки при желании уменьшается или наоборот, увеличивается. Результат примера при крайнем значении ползунка в браузере Chrome показан на рис. 2.

Управление шириной картинки с помощью ползунка

Рис. 2. Управление шириной картинки с помощью ползунка

Старые версии браузеров, которые не поддерживают значение range для атрибута type , отображают поле формы как текстовое.

Ползунок html + CSS

Здравствуйте уважаемые начинающие веб-мастера. Ещё один Оригинальный эффект CSS.

Сейчас будем делать красивый ползунок для сайта. Простой-то ползунок сделать просто. Достаточно ввести в html код тег input с атрибутом type=&#187;range&#187;, как любой браузер поймёт, что на экране нужно вывести ползунок.

Вот пожалуйста, вставляем в любом месте

И получаем там же

Невзрачненько. Чтоб сделать этот бегунок красивым, можно применить css, но не всё так просто. Дело в том, что каждый браузер отображает бегунок по своему.

Я не стану забивать Вам мозги подробностями, почему так происходит, Вы же ещё только начинающие, и многое Вам будет совершенно не понятно.

Скажу только, что для того чтоб наш бегунок получился красивым во всех браузерах, мы будем использовать вендорные (браузерные) префиксы.

Далее я Вам дам несколько вариантов кода с объясняющими комментариями, и Вы методом научного тыка и матерного слова (самый результативный метод), сможете поработать в Notepad ++ над внешним видом бегунка.

Про незнакомые элементы кода, лучше всего можно узнать на сайте htmlbook. Более понятного и подробного описания, с примерами, в интернете нет.

Итак, код красивого бегунка:

input[type=range] <
-webkit-appearance : none ;
margin : 50px ;
width : 20% ;
>

input[type=range]:focus <
outline : none ;
>

input[type=range]::-webkit-slider-runnable-track <
height : 8px ;
cursor : pointer ;
animate : 0.2s ;
border : 1px solid #575656 ;
background : #AD020D ;
>

/* Бегунок в Хроме */

input[type=range]::-webkit-slider-thumb <
box-shadow : 1px 1px 1px #000 ;
border : 1px solid #000 ;
height : 35px ;
width : 15px ;
border-radius : 40%/60% ;
background : #ffffff ;
cursor : pointer ;
-webkit-appearance : none ;
margin-top : -14px ;
>

/* Полоса в Мозиле */

input[type=range]::-moz-range-track <
height : 8px ;
cursor : pointer ;
animate : 0.2s ;
box-shadow : 1px 1px 1px #000 ;
background : #AD020D ;
border : 1px solid #575656 ;
>

/* Бегунок в Мозиле */

input[type=range]::-moz-range-thumb <
box-shadow : 1px 1px 1px #000 ;
border : 1px solid #000000 ;
height : 36px ;
width : 16px ;
border-radius : 40%/60% ;
background : #ffffff ;
cursor : pointer ;
>
< /style >
< /head >
< body >
< input type color: #008080;">range " value color: #008080;">0 " max color: #008080;">100 "/>
< /body >
< /html >

А вот и он сам, работает, можно подвигать:

Ещё один пример, в котором линия, по которой двигается бегунок, является индикатором.

input[type=range] <
-webkit-appearance : none ;
appearance : none ;
width : 260px ;
height : 20px ;
padding : 0 ;
box-shadow : inset 0 0 0 2px #2D7CFA ;
background : #AD020D ;
overflow : hidden ;
>

/* Линия-ндикатор для Firefox */

input[type=range]::-moz-range-track <
background : none ;
border : none ;
>

/* ползунок в Firefox */

input[type=range]::-moz-range-thumb <
-moz-appearance : none ;
width : 20px ;
height : 20px ;
border-radius : 70%/30% ;
border : 2px solid #818181 ;
box-shadow :
-13px 0 #4A0101, -26px 0 #4A0101, -39px 0 #4A0101,
-52px 0 #4A0101, -65px 0 #4A0101, -78px 0 #4A0101,
-91px 0 #4A0101, -104px 0 #4A0101, -117px 0 #4A0101,
-130px 0 #4A0101, -143px 0 #4A0101, -156px 0 #4A0101,
-169px 0 #4A0101, -182px 0 #4A0101, -195px 0 #4A0101,
-208px 0 #4A0101, -221px 0 #4A0101, -234px 0 #4A0101,
-247px 0 #4A0101, -260px 0 #4A0101;
>

/* ползунок в Хроме */

input[type=range]::-webkit-slider-thumb <
-webkit-appearance : none ;
width : 20px ;
height : 20px ;
border-radius : 70%/30% ;
border : 2px solid #818181 ;
background : #fff ;
box-shadow :
-13px 0 #4A0101, -26px 0 #4A0101, -39px 0 #4A0101,
-52px 0 #4A0101, -65px 0 #4A0101, -78px 0 #4A0101,
-91px 0 #4A0101, -104px 0 #4A0101, -117px 0 #4A0101,
-130px 0 #4A0101, -143px 0 #4A0101, -156px 0 #4A0101,
-169px 0 #4A0101, -182px 0 #4A0101, -195px 0 #4A0101,
-208px 0 #4A0101, -221px 0 #4A0101, -234px 0 #4A0101,
-247px 0 #4A0101, -260px 0 #4A0101;
>
< /style >
< /head >
< body >
< input type color: #008080;">range " value color: #008080;">0 " max color: #008080;">100 "/>
< /body >
< /html >

Результат, так же рабочий:

Чтоб метод тыка и матерного слова, не свёлся у Вас к простому копированию, а был осмысленным и, значит, более плодотворным, я убрал из кода обеих ползунков участок, предназначенный для IE.

Постарайтесь сделать его самостоятельно, и Вы получите наибольшую пользу от этой статьи.

Желаю творческих успехов.

Короткий отдых
Перемена

Мужчина упал с десятого этажа, и не разбился. Так целиком и похоронили.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *