Линейный ползунок на HTML5, SVG и JavaScript

Линейный ползунок на HTML5, SVG и JavaScript

От автора: в большей степени пользователи легко разбираются в элементах интерфейса с численной системой измерения, но графический интерфейс может «направлять» пользователя и повышает ассоциативную составляющую, особенно при работе с большими диапазонами значений. Как и в предыдущем примере с кольцом, тут также используется SVG, JavaScript и input типа range.

Как и раньше svg помещается в label:

Главным элементом в SVG является rect — он обрезается треугольным полигоном polygon. input изменяется в диапазоне от 0 до 100: обратите внимание на то, что по ширине он равен polygon; значение инпута совпадает с шириной элемента rect.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

На все элементы хватает всего пары строк CSS:

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

На инпут повешены оба события onchange и oninput, которые вызывают одну функцию, работающую во всех браузерах. Функция с кодом JS:

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Экспоненциальный ползунок

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

Первый линейный пример работает только при условии, что ширина SVG бокса равна максимальному значению слайдера. В реальной жизни это неприменимо. В этом демо я с помощью JS считываю и сравниваю ширину viewbox’а и значение слайдера. Разметка остается почти та же, но для ясности я сменил значения name и id:

Так как путь повторяется, то намного лучше ссылаться на оба режима через один <symbol>, но эту задачу я оставлю читателям. Скрипт стал немного больше:

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

Viewbox должен измеряться в пикселях

Нельзя вставлять ничего лишнего между viewBox и элементами в SVG

SVG должен занимать всю ширину viewbox’а

В самом конце вызывается функция expChange и задает исходную позицию экспоненциального графа. Данную технику можно использовать и по-другому: в теории с помощью JS можно создавать всю SVG структуру и автоматизировать весь процесс.

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

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

Комментарии Вконтакте:

Комментарии Facebook:

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree