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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Метки:

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

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