Type range двойной ползунок. Стилизация и создание скриптов для ползунков

И результат применения ползунка в коде:

Для работы с ползунком введены следующие атрибуты:

• max — максимальное значение элемента (соответствует крайнее правое положение ползунка). Число.
• min — минимальное значение элемента (соответствует крайнее левое положение ползунка). Число.
• step — шаг ползунка. Число.

Пример применения атрибутов, представлен ниже.

Кроме того, как и с любым элементов HTML к input type="range" можно применить оформление CSS.

Как работать с ползунком в JS

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

function fun1() { var rng=document.getElementById("r1"); //rng - это Input var p=document.getElementById("one"); // p - абзац p.innerHTML=rng.value; }

function fun1 () { var rng = document . getElementById (& #x27;r1"); //rng - это Input var p = document . getElementById (& #x27;one"); // p - абзац p . innerHTML = rng . value ;

Обратите внимание на новое событие oninput. Событие OnInput — срабатываем при любом изменении в элементе формы, например при вводе нового символа, или при перемещении ползунка на 1px. В отличие от события OnChange — которое срабатываем только при потере фокуса элементом, oninput срабатываем при любом изменении в элементе. Данное событие добавляет ползунку интерактивности.

Событие onchange также удобно использовать вместе с элементом select .

Практическое задание

Задание 1. Замените событие OnInput в представленном примере на событие onchange. Изучите как изменилось поведение элементов. Когда происходит обновление значения в абзаце?

Задание 2. Задайте ползунку минимальное значение 50, а максимальное 150. Изучите какое минимальное и максимальное значение выводиться в абзаце?

Задание 3. Задайте шаг ползунка равным 10. Как происходит изменение значений в абзаце?

Задание 4. Задайте шаг изменения значений равным 7. Как измениться максимальное и минимальное значение?

Продолжаем работать с ползунком range

Внимание! Значения считанные из свойства value являются строкой. Не забывайте их переводить в число с помощью функции parseInt(ваша строка).

Давайте решим простую задачу: выведем значение ползунка в input. Для этого необходимо значение свойства ползунок.value передать в свойство input.value. Пример представлен ниже:

function fun1() { var rng=document.getElementById("r1"); //rng - это ползунок var i1=document.getElementById("i1"); // i1 - input i1.value=rng.value; }

Практическое задание

Задание 5. Изучите работу примера приведенного выше. Добавьте в input type="text" событие oninput="fun2()". Для функции fun2 запрограммируйте обратную задачу — те значения которые вводятся в input автоматически присваиваются ползунку.

Для закрепления давайте выполним еще одно задание: с помощью ползунка будем изменять размер блока div. Верстка задачи представлена ниже:

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

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

Задача

Отыскать кроссбраузерное решение на js для интерфейса выбора диапазона. Требования:

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

Решение

Будем использовать плагин jQuery UI Slider. Сам по себе он просто создает ползунок, но подружить его с инпутами не составит труда.

Проверено в:

• IE 6-8
• Firefox 4
• Opera 11
• Safari
• Chrome

Итак, вначале давай представим, что инпутов нет, и посмотрим, как работает сам плагин.

Что качать?

• (24.33 Kb) ядро UI + сам слайдер.

Быстрый старт

Подключаем библиотеки:

Инициализируем ползунок скриптом:

jQuery("#slider").slider({ min: 0, max: 1000, values: , range: true });

А теперь подробнее

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

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

Настройки

При инициализации плагина можно задать его параметры:

Название параметра Описание Тип данных Значение по-умолчанию disabled animate max min orientation range step value values

Отключает (true) или включает (false) слайдер.	boolean	false
Определяет, будет ли ползунок передвигаться в точку плавно, когда пользоваль щелкает на точку на полосе. Также может принимать значение string представляющая одну из трех скоростей на выбор ("slow", "normal", или "fast") или число миллисекунд, определяющее продолжительность анимации (например, 1000).	boolean, string, int	false
Максимальное значение слайдера.	Number	100
Минимальное значение слайдера.	Number	0
Определяет ориентацию шкалы: слева направо или снизу вверх. Возможные значения: "horizontal", "vertical".	String	horizontal
Если выставлено в true, на слайдере будет двуа ползунка и диапазон между ними, который можно стилизовать. Два других значения это "min" и "max". Значение "min" создает диапазон от минимума шкалы до ползунка. Значение "max" создает диапазон от ползунка до максимума шкалы.	boolean, string	false
Определяет шаг слайдера. Полный диапазон шкалы (max − min) должен равномерно делится на шаг.	Number	1
Определяет значение слайдера, если есть только однин ползунок. Если имеется более одного ползунка, определяет значение первого ползунка.	Number	0
Эта опция может использоваться для указания нескольких ползунков. Если range имеет значение true, значений "values" должно быть 2.	Array	null

События

События — это функции, которые будут выполняться в определенные моменты жизни ползунка. Задавать их можно при инициализации. Например:

JQuery("#slider").slider({ stop: function(event, ui) { alert("Ползунок переехал на новую позицию!"); } });

Перечень событий:

create start slide change stop

Событие возникает в момент создания ползунка

Событие возникает в момент, когда пользователь начинает двигать ползунок.

Событие происходит при каждом перемещения мыши во время прокрутки. Используйте ui.value (слайдеры с одним ползунком), чтобы получить текущее значение ползунка, $(..).slider("value", index), чтобы получить значение ползунка для слайдеров с несколькими ползунками.

Событие происходит при остановке прокрутки или если величина изменяется программным способом (посредством метода value). Принимает аргументы event и ui. Используйте event.orginalEvent, чтобы определить, изменилось ли значение с помощью мыши, клавиатуры или программно. Используйте ui.value (слайдеры с одним ползунком), чтобы получить текущее значение ползунка, $(this).slider("values", index), чтобы получить значение ползунка для слайдеров с несколькими ползунками.

Событие возникает в момент, когда пользователь закончил двигать ползунок.

Методы

Вызов этих функций позволяет повлиять на работу ползунка, налету изменив его параметры. Делается это с помощью конструкции.slider(), например вот так:

JQuery("#slider").slider("values",0, 100);

Перечень методов:

destroy disable enable option option widget value values

Удаляет функционал ползунка, возвращая элемент к первоначальному состоянию.

Отключает слайдер.

Включает слайдер.

Получает или устанавливает любую опцию слайдера. Если значение не указано, будет выступать в качестве получателя. Синтаксис: .slider("option", optionName , )

Устанавливает сразу несколько опций слайдера путем предоставления опций объекта. Синтаксис: .slider("option", options)

Возвращает элемент.ui-slider.

Устанавливает или возвращает значение слайдера. Для слайдеров с одним ползунком.

Устанавливает или возвращает значение слайдера. Для слайдеров с несколькими ползунками или с диапазоном.

Настройка стилей

Вообще-то стилизация элементов jQuery UI (одним из которых является данный слайдер) происходит путем выбора понравившейся темы и загрузки с официального сайта готового CSS. Лично меня такой подход не устраивает совершенно. Поэтому я выбрал из ихнего (очень избыточного, если использовать только слайдер) CSS только нужный код, который здесь и привожу с комментариями.

/* Ширина слайдера */ #slider { width: 200px; } /* Контейнер слайдера */ .ui-slider { position: relative; } /* Ползунок */ .ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 13px; /* Задаем нужную ширину */ height: 13px; /* и высоту */ background: url(../img/slider.png) no-repeat; /* картинка изображающая ползунок. Или можно залить цветом, задать бордюр и скругления */ cursor: pointer } .ui-slider .ui-slider-range { position: absolute; z-index: 1; font-size: .7em; display: block; border: 0; overflow: hidden; } /* горизонтальный слайдер (сама полоса по которой бегает ползунок) */ .ui-slider-horizontal { height: 3px; /* задаем высоту согласно дизайна */ } /* позиционируем ползунки */ .ui-slider-horizontal .ui-slider-handle { top: -5px; margin-left: -6px; } .ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; } .ui-slider-horizontal .ui-slider-range-min { left: 0; } .ui-slider-horizontal .ui-slider-range-max { right: 0; } /* оформление полосы по которой ходит ползунок */ .ui-widget-content { border: 1px solid #D4D4D4; background: #fff; } /* оформление активного участка (между двумя ползунками) */ .ui-widget-header { border: 1px solid #D4D4D4; background: #f00; } /* скругление для полосы слайдера */ .ui-corner-all { -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; }

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

превращается в

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

Добавляем связанные инпуты

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

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

Код обоих событий одинаков — берем текущее значение с помошью метода.slider("values",X) и помещаем в нужный инпут:

JQuery("#slider").slider({ min: 0, max: 1000, values: , range: true, stop: function(event, ui) { jQuery("input#minCost").val(jQuery("#slider").slider("values",0)); jQuery("input#maxCost").val(jQuery("#slider").slider("values",1)); }, slide: function(event, ui){ jQuery("input#minCost").val(jQuery("#slider").slider("values",0)); jQuery("input#maxCost").val(jQuery("#slider").slider("values",1)); } });

Осталось организовать обратную связь. Учим ползунок перемещаться, если пользователь вводит значение в инпут. Тут можно использовать событие keypress, чтобы ползунок реагировал на каждую нажатую клавишу или событие change, если хотим, чтобы изменение вступало в силу после завершения ввода и ухода из поля. Дело вкуса.

Заодно я вставил проверку выхода верхнего значения за пределы диапазона (у меня это 1000) и проверку, чтобы нижний ползунок не получил значение больше верхнего:

JQuery("input#minCost").change(function(){ var value1=jQuery("input#minCost").val(); var value2=jQuery("input#maxCost").val(); if(parseInt(value1) > parseInt(value2)){ value1 = value2; jQuery("input#minCost").val(value1); } jQuery("#slider").slider("values",0,value1); }); jQuery("input#maxCost").change(function(){ var value1=jQuery("input#minCost").val(); var value2=jQuery("input#maxCost").val(); if (value2 > 1000) { value2 = 1000; jQuery("input#maxCost").val(1000)} if(parseInt(value1) > parseInt(value2)){ value2 = value1; jQuery("input#maxCost").val(value2); } jQuery("#slider").slider("values",1,value2); });

Последняя деталь — нужно обеспечить чтобы пользователь не смог поломать плагин, введя в инпуты буквы или некорректрые числовые значения. Этот момент подробно не рассматриваю, так как он не касается непосредственно темы статьи. Любопытных отсылаю к , где это, конечно, реализовано.

В одной из следующих публикаций мы усложним задачу. Я покажу, как на основе этого решения можно сделать выбор значения с неравномерным шагом и разным масштабом. То есть когда требуется, чтобы, например, на первую половину слайдера приходился диапазон значений от 0 до 100, а на вторую от 100 до 1000.

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

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

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

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

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

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

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

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

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

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

HTML5 IE 10 Cr Op Sa Fx

Ползунок function sizePic() { size = document.getElementById("size").value; img = document.getElementById("pic"); img.width = 60 + 20*size; }

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

В данном примере при управлении ползунком срабатывает событие 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. Использование ползунка

Ползунок function sizePic() { size = document.getElementById("size").value; img = document.getElementById("pic"); img.width = 60 + 20*size; }

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

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