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

Всем привет!
Сделать ползунок в HTML – не проблема, для многих сделать это – проще простого. А вот оформить и красиво вывести значение ползунка умеют не все.
Так вот, в сегодняшней статье я расскажу, как создать ползунок, как вывести результат и как оформить ползунок.

С чего же начнем? Начнем с того, что я покажу, каким тегом создается ползунок, и какие атрибуты у него есть.
Для создания ползунка в HTML существует тег «input»:

<input ENGINE="range">

В результате получится вот такое:

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

Атрибуты:

Пример:

<input type="range" min="0" max="10" list="rangeList1">
<datalist>
<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>5</span>

Полный пример:

<input type="range" step="5" min="0" max="10" list="rangeList" onchange="document.getElementById('rangeValue').innerHTML = this.value;">
<datalist>
<option value="0" label="0">
<option value="5" label="5">
<option value="10" label="10">
</datalist>
<span>5</span>

А вот и результат:

[ посмотреть демонстрацию ]

Также в интернете нашел вот такой способ, как мне показалось, очень интересный:

<form onsubmit="return false" oninput="level.value = flevel.valueAsNumber">
<input name="flevel" type="range" min="20" max="10000" value="20" step="10">
<output for="flying" name="level">20</output>
</form>

Результат:

[ посмотреть демонстрацию ]

Как оформить ползунок?

Итак, мы имеем стандартный ползунок, и отображается он на каждом браузере по-разному:

Приступим к изменению вида

В браузерах 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;
}

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

Теперь изменим ползунок:

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;
}

В результате:

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

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

Последние новости категории:

Похожие статьи

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

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

Метки: css, html, javascript, Вебмастеру, для сайта

Оформление ползунка input type=»range»

.range-wrap {

    background: #ededed;

    margin: 20px 0;

    border: 8px solid #BFE2FF;    

    box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);    

}

.range-slider * {

    margin: 0;

    padding: 0;

    border: 0;

}    

.range-slider,

.range-ticks,

.label-range{

    display: flex;

}

.range-slider {

    flex-flow: column nowrap;

    margin: 0 auto;

    max-width: 18em;

    padding: 0 1.5em 1.5em 1.5em;

    font-size: calc(20px + (20)*(100vw)/(2000));

    box-sizing: border-box;    

}

.range-slider input[type=range],

.range {

    border-radius: 0.75em;

    overflow: hidden;

    position: relative;

    height: 1.5em;    

}

.range-slider input[type=range] {

    background-color: transparent;

    font: 1em/1.5 ‘Roboto Condensed’, sans-serif;

    box-shadow: 0.3em 0.3em 0.4em #c1c2c5 inset, -0.3em -0.3em 0.4em #fff inset;

    display: block;

    padding: 0 0.1em;

    width: 100%;

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

}

.range-slider input[type=range]:focus {

    outline: transparent;

}

.range-ticks {

    font: 1em/1.5 ‘Roboto Condensed’, sans-serif;

    justify-content: space-between;

    align-items: center;

    pointer-events: none;

    position: absolute;

    top: 0.04em;

    left: 0.75em;

    width: calc(100% — 1.5em);

    height: 100%;

}

.range-tick,

.range-tick-text {

    display: inline-block;

}

.range-tick {

    color: #454954;

    font-size: 0.5em;

    text-align: center;

    width: 0;

    -webkit-user-select: none;

    -moz-user-select: none;

    user-select: none;

}

.range-tick-text {

    transform: translateX(-50%);

}

.label-range {

    font: 0.8em/1.5 ‘Roboto Condensed’, sans-serif;

    margin-top: 1em;

    margin-bottom: 0.5em;

}

.data-range {

    display: flex;

    height: 3em;    

    width: 3em;

    justify-content: center;

    align-items: center;    

    text-align: center;

    font: bold 0.5em/1.5 ‘Roboto Condensed’, sans-serif;

    color: #FFF;

    position: absolute;

    top: 0;

    z-index: 2;

    pointer-events: none;

    background-color: #337AB7;

    border: 0;

    border-radius: 50%;

    box-shadow: -0.3em -0.3em 0.5em #0d518c inset, 0 -0.2em 0.2em 0 rgba(0,0,0,0.2), 0.3em 0.5em 0.8em  rgba(0,0,0,0.3);

}

Ползунок html+css

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

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

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

<input type="range">

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

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

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

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

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

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

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

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

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

Код:

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

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

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

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

Перемена

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

Страница из блоков < < < В раздел > > > Вращающийся куб-баннер CSS

HTML5 input type range — ползунок и его оформление

Ползунок особенно полезен для форм, в которых существуют три условия:

Широкий диапазон чисел одинаково доступных пользователю.
Есть известный верхний и более низкий предел диапазона.
Пользователь, должен, будет «перетаскивать» при этом регулируя диапазон заданых чисел.

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

Пример использования range

<label for=weight>Громкость</label>
<input type=range id=weight min=10 value=10 max=2000 step=100>

Альтернативы – прекрасный выбор вместо того, чтобы заменить ввод чисел, и никакой дополнительной разметки или javasript просто перетянуть ползунок и увидеть результат.

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

Установка, Доступность И Признаки

На базовом уровне у входа ползунка должно быть по крайней мере три признака: min(самое низкое принятое число), max (самое высокое) и value ( начальное значение). Поля формы должны были связать элементы лейбла, означая, что у диапазона должен также быть признак id в большинстве случаев. Давайте использовать пример регулировки громкости:

Для примера рассмотрим создание поля формы input type range для регулировки громкости.

<label for=fader>Уровень громкости</label>
<input type=range min=0 max=5 value=3 id=fader>

Примечание, у ползунка есть несколько характерных особенностей:

Кнопка ползунка «хватается», поскольку она перемещается. По умолчанию эти пункты моментального изменения соответствуют местоположению целых чисел в диапазоне. Когда выставлено, кнопка может быть перемещена с/вниз клавишами курсора, точно так же как ввод числа. (Не все браузеры поддерживают это все же). Степень ползунка не изменяется согласно значения max; вместо этого, это регулируется, изменяя ширину элемента в CSS. Относительно положение выбраного числа будет подставлено в value на это изменение.

Поведение установленной кнопки ползунка может быть особенно запутывающим, когда минимум и максимум относительно близки. Как пример, хочу предоставить ползунок микшера объема между 0 и 1:

<input type=range min=0 max=1 value=1 id=fader>

Кнопка теперь может выбирать значение без промежуточных положений. Решение состоит в том, чтобы ввести больше степени детализации при использовании значения атрибута шага: «step»

<input type=range min=0 max=1 value=1 id=fader step=".05">

Примечание, что точно так же как ввод числа, шаг может использоваться, чтобы позволить только определенные целые числа в диапазоне: можно принять только четные числа между min и max, устанавливая step=2, например. Также отметьте, что использование коротких путей HTML5 ограничивается в этом случае: следует использовать кавычки вокруг чисел как 0.5 для примера, чтобы все работало правильно. Ценность в выставлении шага заставляет ползунок выбрать число с плавающей запятой, и является самым прекрасным уровнем контроля. Но мы то не имеем возможности видеть, а какое именно мы значение выбрали. Давайте прибегним к маленькой хитрости и добавим немного javascript, и посмотрим диапазон чисел который мы выбираем перетаскивая ползунок вверх или вниз.

Рассмотрим пример

<label for=fader>Volume</label>

<input type=range min=0 max=100 value=50 id=fader step=1 onchange="outputUpdate(value)">

<output for=fader id=volume>50</output>

<script>

function outputUpdate(vol) {

  document.querySelector('#volume').value = vol;

}

</script>

Примечание: браузер firefox — не поддерживает автоматичесский подхват значений поля range, а именно число которое подставилось в value значение формы, до того пока вы не бросите ползунок. Это конечно недостаток браузера.

Вертикальное расположение ползунка

Присвоение вертикального положения ползунку будет иногда иметь смысл: большинство пользователей думает об расположении как и «вертикально», например, а не от стороны к стороне. Разумное расположение состоит в том, что использование, преобразования CSS вращали бы элемент правильно, но это не будет работать как ожидалось. Для валидации и адаптации поля формы range используем css позиционирование для таких браузеров:

В Firefox это — slider-vertical;

В Webkit это — CSS: — -webkit-appearance:

И для IE, есть довольно отличное решение: writing-mode: bt-lr;

Объединение всех трех произвело бы следующее:

input.vertical { -webkit-appearance: slider-vertical;  writing-mode: bt-lr; }
<input type=range min=0 max=100 value=50 class=vertical orient=vertical>

Результат Вы видите в правой части параграфа

Моделирование Ползунка

Вид ползунка может быть настроено полностью в CSS, используя множество псевдоотборщиков:

input[type=range], ::-moz-range-track, ::-ms-track {
-webkit-appearance: none;
background-color: #3f91e5;
width: 250px;
height:20px;
}

В этом пункте может быть настроена кнопка ползунка:

::-webkit-slider-thumb, ::-moz-range-thumb, ::-ms-thumb {{
  -webkit-appearance: none;
  background-color: #666;
  width: 10px;
 height: 20px;
 }

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

Возможности HTML5 учитывает особенно умную особенность:подключение элемента к datalist с числовыми значениями через выбор из списка создаст ряд вариантов вдоль бара ползунка с положением каждого нажатия, определенного выбором в datalist.

Например, изменение нашего аудио контроля:

<label for=fader>Volume</label>
<input type=range min=0 max=100 value=50 id=fader step=20 list=volsettings>
<datalist id=volsettings>
<option>0</option>
<option>20</option>
<option>40</option>
<option>60</option>
<option>80</option>
<option>100</option>
</datalist>

На этой ноте завершу сегодняшнюю публикацию. Надеюсь материал станет вам полезным. Есть вопросы пожалуйста задавайте в комментариях, я всегда всем отвечаю.

Стилизация полосы прокрутки HTML5 для разных браузеров

Ползунок — это новый способ ввода информации, введенный в HTML5. Этот способ позволяет ввести число в заданном диапазоне. Браузер стандартно отобразит этот способ ввода информации как полосу прокрутки. Это очень интуитивно понятный пользовательский интерфейс, широко распространенный в приложениях. Мы можем передвигать ручку ползунка вправо или влево, чтобы выбрать число в пределах диапазона.

Но как Вы можете видеть выше, каждый браузер отображает этот способ ввода информации немного по-своему, что не понравится дизайнерам. Так что в этом уроке мы покажем, как привести полосы прокрутки к одинаковому виду. Давайте начнем.

Рекомендованное чтение: Создание и стилизация индикатора прогресса с использованием HTML5

В браузерах Chrome, Safari и Opera 

Safari и Opera — браузеры Webkit. Хотя Chrome решил использовать свой собственный движок Blink, пока что он все еще наследуют некоторые формы записи от Webkit.

Webkit предоставляет удобный способ стилизации любых форм ввода, включая ползунок. Для начала мы можем выбрать тег input с атрибутом selector и отменить стандартные стили Webkit/Chrome, задав свойству -webkit-appearance значение none.

input[type=range] {
    -webkit-appearance: none
}

После этого мы можем добавить любые свойства, такие как граница, цвет фона, закругление границы и так далее.

input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    border-radius: 8px;
    height: 7px;
    border: 1px solid #bdc3c7;
    background-color: #fff;
} 

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

Чтобы применить к ней стили, нам нужно использовать собственный псевдоэлемент Webkit  ::-webkit-slider-thumb и таким же способом отменить стандартные стили с помощью -webkit-appearance, следующим образом:

input[type='range']::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #ecf0f1;
border: 1px solid #bdc3c7;
width: 20px;
height: 20px;
border-radius: 10px;
cursor: pointer;
}

Так мы зададим стили для ползунка для браузера Webkit. Стили, которые мы задали выше, должны примениться в браузерах Chrome, Safari и в последних версиях браузера Opera. Тем не менее, они не повлияют на браузеры Firefox и Internet Explorer, так как они работают на других движках. Но у нас есть обходные пути для этих двух браузеров.

В браузере Firefox 

Добавление стилей напрямую с  атрибутом selector input [type=’range’]не изменит стандартные стили в браузере Firefox. Вместо этого нам нужно использовать собственные псевдоэлементы браузера Firefox ::-moz-range-track и ::-moz-range-thumb.

Псевдоэлемент ::-moz-range-track повлияет на полосу ползунка, по которой движется ручка, а ::-moz-range-track повлияет на ручку ползунка.

.firefox input[type=range]::-moz-range-track {
    border-radius: 8px;
    height: 7px;
    border: 1px solid #bdc3c7;
    background-color: #fff;
}
.firefox input[type=range]::-moz-range-thumb {
    background: #ecf0f1;
    border: 1px solid #bdc3c7;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    cursor: pointer;
}

Мы применили те же стили. Откройте браузер Firefox, и Вы увидите практически такой же результат, как и в браузерах Webkit.

В браузере Internet Explorer 

Браузер Internet Explorer отображает полосу прокрутки совсем не так, как остальные браузеры. Чтобы было проще, мы нарисовали изображение, показывающее части, составляющие ползунок.

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

Всем этим частям ползунка можно задать стили с помощью собственных псевдоэлементов браузера Internet Explorer ::-ms-fill-lower, ::-ms-fill-upper, ::-ms-thumb, ::-ms-ticks и ::-ms-tooltip. Здесь мы применим те же стили, что и для браузеров Webkit и Firefox.

input[type="range"]::-ms-fill-lower,
input[type="range"]::-ms-fill-upper {
    background: transparent;
}
input[type="range"]::-ms-track {
    border-radius: 8px;
    height: 7px;
    border: 1px solid #bdc3c7;
    background-color: #fff;
}
input[type="range"]::-ms-thumb {
    background-color: #ecf0f1;
    border: 1px solid #bdc3c7;
    width: 20px;
    height: 20px;
    border-radius: 10px;
    cursor: pointer;
}

Но в результате получилось не то, что мы ожидали. Деления видны, а низ и верх ручки ползунка скрыты.

Мы можем легко избавиться от делений, добавив step=»any» тегу input. Тем не менее, мы не можем сделать ручку ползунка полностью видимой. Это как если бы тегу input задали значения свойства overflow как hidden, но это нельзя отменить, просто задав  значения свойства overflow как visible. Это то, с чем мы еще разбираемся.

Заключение 

Ползунки довольно настраиваемы. К сожалению, у каждого браузера собственный способ, и поэтому нам приходится писать больше кода, чем ожидалось. Надеемся, в будущем появится стандарт, регулирующий этот вопрос. И, наконец, вот ссылка на ползунок, который мы показали Вам в этом уроке.

Демонстрация работы – Скачать исходный код

Автор урока Thoriq Firdaus

Перевод — Дежурка

Смотрите также:

Тег | htmlbook.ru

Спецификация

Описание

Тег <input> является одним из разносторонних элементов формы и позволяет создавать разные элементы интерфейса и обеспечить взаимодействие с пользователем. Главным образом <input> предназначен для создания текстовых полей, различных кнопок, переключателей и флажков. Хотя элемент <input> не требуется помещать внутрь контейнера <form>, определяющего форму, но если введенные пользователем данные должны быть отправлены на сервер, где их обрабатывает серверная программа, то указывать <form> обязательно. То же самое обстоит и в случае обработки данных с помощью клиентских приложений, например, скриптов на языке JavaScript.

Основной атрибут тега <input>, определяющий вид элемента — type. Он позволяет задавать следующие элементы формы: текстовое поле (text), поле с паролем (password), переключатель (radio), флажок (checkbox), скрытое поле (hidden), кнопка (button), кнопка для отправки формы (submit), кнопка для очистки формы (reset), поле для отправки файла (file) и кнопка с изображением (image). Для каждого элемента существует свой список атрибутов, которые определяют его вид и характеристики. Кроме того, в HTML5 добавлено еще более десятка новых элементов.

Синтаксис

<input атрибуты>

<input атрибуты />

Атрибуты

accept

Устанавливает фильтр на типы файлов, которые вы можете отправить через поле загрузки файлов.

accesskey

Переход к элементу с помощью комбинации клавиш.

align

Определяет выравнивание изображения.

alt

Альтернативный текст для кнопки с изображением.

autocomplete

Включает или отключает автозаполнение.

autofocus

Устанавливает фокус в поле формы.

border

Толщина рамки вокруг изображения.

checked

Предварительно активированный переключатель или флажок.

disabled

Блокирует доступ и изменение элемента.

form

Связывает поле с формой по её идентификатору.

formaction

Определяет адрес обработчика формы.

formenctype

Устанавливает способ кодирования данных формы при их отправке на сервер.

formmethod

Сообщает браузеру каким методом следует передавать данные формы на сервер.

formnovalidate

Отменяет встроенную проверку данных на корректность.

formtarget

Определяет окно или фрейм в которое будет загружаться результат, возвращаемый обработчиком формы.

list

Указывает на список вариантов, которые можно выбирать при вводе текста.

max

Верхнее значение для ввода числа или даты.

maxlength

Максимальное количество символов разрешенных в тексте.

min

Нижнее значение для ввода числа или даты.

multiple

Позволяет загрузить несколько файлов одновременно.

name

Имя поля, предназначено для того, чтобы обработчик формы мог его идентифицировать.

pattern

Устанавливает шаблон ввода.

placeholder

Выводит подсказывающий текст.

readonly

Устанавливает, что поле не может изменяться пользователем.

required

Обязательное для заполнения поле.

size

Ширина текстового поля.

src

Адрес графического файла для поля с изображением.

step

Шаг приращения для числовых полей.

tabindex

Определяет порядок перехода между элементами с помощью клавиши Tab.

type

Сообщает браузеру, к какому типу относится элемент формы.

value

Значение элемента.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

Не требуется.

Пример

HTML5IECrOpSaFx6

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <title>Тег INPUT</title>
 </head>
 <body>

 <form name="test" method="post" action="input1.php">
  <p><b>Ваше имя:</b><br>
   <input type="text" size="40">
  </p>
  <p><b>Каким браузером в основном пользуетесь:</b><Br>
   <input type="radio" name="browser" value="ie"> Internet Explorer<Br>
   <input type="radio" name="browser" value="opera"> Opera<Br>
   <input type="radio" name="browser" value="firefox"> Firefox<Br>
  </p>
  <p>Комментарий<Br>
   <textarea name="comment" cols="40" rows="3"></textarea></p>
  <p><input type="submit" value="Отправить">
   <input type="reset" value="Очистить"></p>
 </form>

 </body>
</html>

Результат данного примера показан на рис. 1.

Рис. 1. Вид элементов формы в браузере

Ползунок html с нужным положением. Стилизация и создание скриптов для ползунков

Ползунок предназначен для ввода чисел в указанном диапазоне, но в отличие от поля имеет другой интерфейс и применяется в тех случаях, когда не особенно важно указывать точное значение. На рис. 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 , отображают поле формы как текстовое.

Ползунок предназначен для ввода чисел в указанном диапазоне, но в отличие от поля имеет другой интерфейс и применяется в тех случаях, когда не особенно важно указывать точное значение. Браузеры по своему отображают вид ползунка, так на рис. 1 продемонстрирован вид ползунка в Chrome.

Рис. 1. Вид ползунка

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

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

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

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

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

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

Размер рисунка:

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

Всем привет, решил написать статью о том как можно стилизовать элемент html 5 input с типом range, этакий ползунок, удобный и современный Так же покажу как работать с ним через JavaScript, на примере JQuery. Хочу сразу сказать, со стилизацией проблем практически не возникает, но вот если тебе нужно еще и какие то действия с ним выполнять, тут есть подводные камни о которых я расскажу ниже. Некоторые решение есть, но как только будут основные решения я обязательно дополню статью Поехали =)

input type range html

Для начала давай просто напишем код html, я добавлю два input с типом range, один будет показан как изначальный вид в браузере а другой мы будем менять и зададим ему сразу класс range:

3. RANGE

Я уже создал файл для написание кода JS, файл с таблицами стилей и подключил библиотеку JQuery У обоих инпутов одинаковые максимальны и минимальные значения, а так же начальное значение установил на 25
Открываем файл со стилями и сразу задам стили для html, body и блока с классом wrp:

1. html, body {
2. width:100%;
3. height:100%;
4. padding:0;
5. margin:0;
6. .wrp {
7. width:700px;
8. margin:0 auto;

Оформление ползунка input type = «range»

.range-wrap {

background: #ededed;

поля: 20px 0;

граница: сплошная 8 пикселей # BFE2FF;

box-shadow: 0 4px 12px rgba (0,0,0,0.2), 0 16px 20px rgba (0,0,0,0.2);

}

.range-slider * {

margin: 0;

отступ: 0;

граница: 0;

}

.range-slider,

.range-ticks,

.диапазон этикеток {

дисплей: гибкий;

}

.range-slider {

flex-flow: nowrap колонки;

маржа: 0 авто;

max-width: 18em;

отступ: 0 1.5em 1.5em 1.5em;

размер шрифта: calc (20px + (20) * (100vw) / (2000));

размер коробки: бордюр-бокс;

}

. Range-slider input [type = range],

.range {

border-radius: 0.75em;

переполнение: скрыто;

позиция: относительная;

высота: 1.5em;

}

. Ввод ползунка диапазона [тип = диапазон] {

цвет фона: прозрачный;

шрифт: 1em / 1.5 ‘Roboto Condensed’, без засечек;

box-shadow: 0.3em 0.3em 0.4em # c1c2c5 inset, -0.3em -0.3em 0.4em #fff inset;

дисплей: блок;

отступ: 0 0,1em;

ширина: 100%;

-вебкит-внешний вид: нет;

-моз-внешний вид: нет;

внешний вид: нет;

}

.ввод ползунка диапазона [тип = диапазон]: фокус {

контур: прозрачный;

}

.range-ticks {

шрифт: 1em / 1.5 ‘Roboto Condensed’, без засечек;

justify-content: пробел между ними;

align-items: center;

событий-указателей: нет;

позиция: абсолютная;

верх: 0,04 эм;

: 0,75em;

ширина: calc (100% — 1.5em);

высота: 100%;

}

.диапазон-тик,

. диапазон-тик-текст {

дисплей: встроенный-блок;

}

. Диапазон-галочка {

цвет: # 454954;

font-size: 0.5em;

выравнивание текста: по центру;

ширина: 0;

-webkit-user-select: нет;

-moz-user-select: нет;

выбор пользователя: нет;

}

.range-tick-text {

transform: translateX (-50%);

}

.label-range {

font: 0.8em / 1.5 ‘Roboto Condensed’, без засечек;

margin-top: 1em;

нижнее поле: 0,5em;

}

.data-range {

дисплей: гибкий;

высота: 3em;

ширина: 3em;

justify-content: center;

align-items: center;

выравнивание текста: по центру;

шрифт: жирный 0.5em / 1.5 ‘Roboto Condensed’, без засечек;

цвет: #FFF;

позиция: абсолютная;

верх: 0;

z-index: 2;

событий-указателей: нет;

цвет фона: # 337AB7;

граница: 0;

радиус границы: 50%;

тень коробки: -0.3em -0.3em 0.5em # 0d518c inset, 0 -0.2em 0.2em 0 rgba (0,0,0,0.2), 0.3em 0.5em 0.8em rgba (0,0,0,0.3);

}

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

Всем привет!
Сделать ползунок в HTML — не проблема, для многих сделать это — проще простого. А вот оформить и красиво вывести значение ползунка умеют не все.
Так вот, в сегодняшней статье я расскажу, как создать ползунок, как получить результат и как оформить ползунок.

С чего же начнем? Начнем с того, что я покажу, каким тегом создается ползунок, и какие атрибуты у него есть.
Для создания ползунка в HTML существует тег «input»:

В результате получится вот такое:

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

Атрибуты:

Пример:

Обратите внимание на имя «rangeList1».Посмотрите, где я его прописал в коде. Это имя может быть любым, но должно быть уникальным и писаться латинскими буквами. Имя в id должно соответствовать имени «list».

Имя — присваивает имя ползунку.
Шаг — устанавливает интервал увеличения значения (перемещения) ползунка.
Значение по умолчанию: «1».
Значение — указывает числовое значение ползунка, отправляемое на сервер или используемое сценариями.

Как вывести значение ползунка?

Все, конечно, круто, но какой смысл в ползунке, если он ничего не выводит.
Сейчас мы все исправим и выведем значение средств JavaScript без какой-либо магии.

 onchange = "document.getElementById ('rangeValue'). InnerHTML = this.value;" 

Вот этот код нужно вставить в ползунок.
Заметьте, если в скобках вы указали «rangeValue», тогда при выводе результата нужно тоже указать это же имя, а иначе работать не будет:

  5  

Полный пример:

 5 
 

А вот и результат:

[посмотреть демонстрацию]

Также в интернете нашел такой способ, как мне показалось, очень интересный:

 20 

 

Результат:

[посмотреть демонстрацию]

Как оформить ползунок?

Итак, мы имеем стандартный ползунок, и отображается в браузере по-разному:

Приступим к изменению вида

В браузерах Chrome, Safari и Opera

Отменим стандартные стили Webkit / Chrome.Для этого зададим свойству «-webkit-appearance» значение «none»:

ввод [тип = диапазон]
{
-webkit-appearance: нет
}
 

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

input [type = range] :: - webkit-slider-runnable-track {
радиус границы: 10 пикселей;
высота: 10 пикселей;
граница: 1px solid # 000;
цвет фона: #ccc;
}
 

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

Теперь изменим ползунок:

input [type = range] :: - webkit-slider-thumb {
-webkit-appearance: нет;
цвет фона: # 000;
граница: 3px solid # 0b6b00;
ширина: 20 пикселей;
высота: 20 пикселей;
радиус границы: 10 пикселей;
курсор: указатель;
маржа сверху: -5 пикселей;
}
 

В результате:

В браузере Firefox

Псевдоэлемент «:: — moz-range-track» повлияет на полосу ползунка, а «:: — moz-range-track» повлияет на ручку ползунка.

Пробуем:

input [type = range] :: - moz-range-track
{
радиус границы: 10 пикселей;
высота: 10 пикселей;
граница: 1px solid # 666;
цвет фона: #ccc;
}

input [type = range] :: - moz-range-thumb
{
цвет фона: # 000;
граница: 3px solid # 0b6b00;
ширина: 20 пикселей;
высота: 20 пикселей;
радиус границы: 20 пикселей;
курсор: указатель;
}
 

В браузере Internet Explorer

Дошла очередь до самого известного и самого корявого, как по мне, Internet Explorer:

input [type = "range"] :: - ms-track {
радиус границы: 10 пикселей;
высота: 10 пикселей;
граница: 1px solid # 666;
цвет фона: #ccc;
}

input [type = "range"] :: - ms-thumb
{
цвет фона: # 000;
граница: 3px solid # 0b6b00;
ширина: 20 пикселей;
высота: 20 пикселей;
радиус границы: 10 пикселей;
курсор: указатель;
}
 

Так что, чтобы ползунки более-менее отображались одинаково на всех браузерах, придется писать большой код на CSS, для каждого свой.

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

Последние новости категории:

Похожие статьи

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

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

Метки: css, html, javascript, Вебмастеру, для сайта

CSS слайдер / Хабр

Общая информация.

Стандарты и префиксы

Для внешних разработчиков это означает появление стандарта, который можно опираться. Теперь не надо бояться, что в будущем какой-либо браузер откажется от своего префиксного нестандартного свойства — оно будет продублировано стандартным свойством и заменит его при необходимости.

Устаревшие версии Internet Explorer, к которому скоро можно будет отнести 9 версию, не использовать, анимацию и преобразовать ни в каком виде.Но их доля всё ещё больше 10% .Для IE7-9 предлагает js- «заглушка», эффект плавного переключения между слайдами — ничего.

Почему CSS, а не JS?

• В большинстве случаев CSS эффекты работают быстрее, поскольку за их исполнение следят исключительно движки браузеров.Это особенно хорошо заметно на мобильных устройствах.
• Для задачи реализации не требуется знание JS и вообще языков программирования. Правка же CSS, как правило, доступно даже рядовому пользователю. Причём «наломать дров» в CSS значительно сложнее, нежели в JS.

Реализация

БЭМ

Классы слайдера:

  .slider / * Блок, предоставляющий ленту изображений * /
.slider__radio / * Радиокнопка * /
.slider__item / * Слайд * /
.slider__img / * Картинка внутри слайда * /
.slider__number-list / * Контейнер с кнопками переключения * /
.slider__number / * Кнопка включения связанного с ней слайда * /
.slider__number-after / * внедрениеён для поддержки IE7 и IE8, которые не включают псевдоэлементы: after и :: after соответственно * /
.slider_count_X / * Модификатор, определяющий количество слайдов X * /

  

Анимация

  @keyframes slider__item-autoplay_count_3
{
0% {opacity: 0;}
10% {opacity: 1;}
33% {opacity: 1;}
43% {opacity: 0;}
100% {opacity: 0;}
}

  

  slider_count_3.слайдер__item,
slider_count_3 .slider__number-after
{
-moz-animation: slider__item-autoplay_count_3 15 секунд бесконечно;
-webkit-animation: slider__item-autoplay_count_3 15 секунд бесконечно;
-o-animation: slider__item-autoplay_count_3 15 секунд бесконечно;
анимация: slider__item-autoplay_count_3 15 сек бесконечно;
}

  

Чтобы этого избежать, но выполнить анимировать все слайды и кнопки при помощи одной анимации, расставить смещение начала анимации во времени каждой пары слайд + кнопка:

  .slider__item: nth-of-type (2),
.slider__number: nth-of-type (2)> .slider__number-after
{
-moz-animation-delay: 5 с;
-webkit-animation-delay: 5 с;
-o-animation-delay: 5 с;
задержка анимации: 5 с;
}
.slider__item: nth-of-type (3),
.slider__number: nth-of-type (3)> .slider__number-after
{
-moz-animation-delay: 10 с;
-webkit-animation-delay: 10 с;
-o-animation-delay: 10 с;
задержка анимации: 10 с;
}
...

  

Также важно, что смещение не зависит от количества слайдов, и может быть описано один раз для их количества.

В итоге плавный анимированный переход между слайдами выглядит так:

Пауза при наведении курсора

 .слайдер: hover .slider__item,
.slider: hover .slider__number-after
{
-moz-animation-play-state: приостановлено;
-webkit-animation-play-state: приостановлено;
-o-animation-play-state: приостановлено;
состояние воспроизведения анимации: приостановлено;
}
  

Переключение по клику

  .slider__radio {стили не выбранной радиокнопки}
.slider__radio: проверено {стили выбранной радиокнопки}
  

В селекторах ниже уровня 4 переключить состояние произвольного элемента (например, непрозрачность слайда) можно только в связке с радиокнопкой, при помощи селекторов соседей + и ~. Переключить можно как стили соседа, так и стили потомков соседа, но в любом случае, когда сосед должен находиться после радиокнопки.

  / * Стиль первого слайда в состоянии «не выбран» * /
.slider__radio: nth-of-type (1) ~ .slider__item: nth-of-type (1) {
непрозрачность: 0,0;
}
/ * Первый слайда в состоянии «Стиль» * /
.slider__radio: nth-of-type (1): checked ~ .slider__item: nth-of-type (1) {
непрозрачность: 1.0;
}
  

  .slider__item
{
-moz-transition: непрозрачность 0,2 с, линейная;
-webkit-transition: линейная непрозрачность 0,2 с;
-o-переход: непрозрачность 0,2 с, линейная;
переход: непрозрачность 0,2 с, линейная;
}

  

Остановка ротации при выборе слайда

анимация, пусть и одинаковая по структуре, есть у каждого слайда, а выключить надо анимацию всех слайдов (иначе в плавном переходе будут участвовать три слайда), все радиокнопки надо располагать до первого слайда.

  


...
 ... 

  

Остановка анимации всех слайдов и кнопок при выборе любого слайда задаётся следующим образом:

  .slider__radio: checked ~ .slider__item,
.slider__radio: проверено ~ .slider__number-list> .slider__number-after
{
непрозрачность: 0,0;
-moz-анимация: нет;
-webkit-animation: нет;
-o-анимация: нет;
анимация: нет;
}

  

Произвольное число слайдов

  .slider_count_X
  

Для поддержки некоторых старых браузеров первый слайд не анимируется. По этой причине контейнер первой картинки имеет непрозрачность всегда равный 1.0. Возникает проблема: при плавном переключении двух других слайдов между собой, первый просвечивает (это может быть и фон родителя блока слайдер). Для удаления эффекта просвечивания устанавливается задержка перехода для всех слайдов, кроме выбранного; для установки же устанавливается z-index больше, чем у всех остальных:

 .slider__item {
непрозрачность: 1.0;
положение: относительное;
-moz-transition: непрозрачность 0,0 с, линейная 0,2 с;
-webkit-transition: непрозрачность 0,0 с, линейная 0,2 с;
-o-переход: непрозрачность 0,0 с, линейная 0,2 с;
переход: непрозрачность 0,0 с, линейная 0,2 с;
}

.slider__radio: nth-of-type (1): проверено ~ .slider__item: nth-of-type (1),
.slider__radio: nth-of-type (2): проверено ~ .slider__item: nth-of-type (2),
.slider__radio: nth-of-type (3): проверено ~ .slider__item: nth-of-type (3),
.slider__radio: nth-of-type (4): проверено ~ .slider__item: nth-of-type (4),
.slider__radio: nth-of-type (5): checked ~ .slider__item: nth-of-type (5) {
-moz-transition: непрозрачность 0,2 с, линейная;
-webkit-transition: линейная непрозрачность 0,2 с;
-o-переход: непрозрачность 0,2 с, линейная;
переход: непрозрачность 0,2 с, линейная;
z-индекс: 6;
}
  

  .слайдер
{
z-индекс: 0;
}
  

Итак

Рабочий пример можно увидеть здесь.

Ion.RangeSlider — слайдер диапазонов

Возможно вас это заинтересует

Ion.RangeSlider — Вот это чудо мне удалось найти на просторах интернета. Классный, удобный, нет огромного количества настроек, легко настраивается, хоть настроек у него мало, но и их вполне хватает!

Кстати данный плагин от отечественного производителя и у автора этого чуда есть еще несколько плагинов, которые я расскажу в следующих статьях.

Особенности плагина

• Кроссбраузерность: Google Chrome, Mozilla Firefox 3.6+, Opera 12+, Safari 5+, Internet Explorer 8+
• Поддерживает устройства с сенсорным экраном (iPhone, iPad, Nexus и др.)
• Поддержка скинов — встроено 3 скина
• Неограниченное кол-во слайдеров на одной странице без потерь производительности и конфликтов между ними
• Два режима работы с 1 или 2 ползунками
• Поддержка отрицательных и дробных значений
• Возможность редактировать шаг
• Поддержка собственного диапазона диапазона
• Автоматически генерируемая сетка
• Отключаемые элементы интерфейса (мин.и макс. значение, текущее значение, сетка)
• Постфиксы и префиксы для установки (20 $, 20 € и т.п.)
• Дополнительный постфикс для максимального значения (например $ 0 — $ 100 +)
• Воможнось улучшить читабельность больших цифр (например 10000000 -> 10 000 000)
• Слайдер пишет свое значение прямо в исходном вводе поля, что позволяет вставить сладер прямо внутрь любой формы
• Любой параметр слайдера так же задать через data-атрибут (например, data-min = ”10 ″)
• Слайдер поддерживает параметр отключен, позволяет делать слайдер неактивным
• Слайдер поддерживает внешние методы (обновить и удалить), позволяющие управлять слайдером уже после создания
• Для продвинутых пользователей есть поддержка функций обратного вызова (onLoad, onChange, onFinish).Слайдер передает свои значения в эти функции первым аргументом в виде объекта

Подключение

Инициализация

Параметры

Обратный звонок

Данные передаваемых в функцию обратного вызова:

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

Создание слайдера (подробно)

Пример слайдера, запущенного с включенным:

Слайдер с помощью можно использовать использовать атрибуты data- * у тэга вход :

Публичные методы

Обновление слайдера, метод , обновление :

Удаление слайдера, метод remove :

Возможно вас это заинтересует