Как стать автором
Обновить

Элемент управления, TrackBar но с двумя ползунками

Время на прочтение1 мин
Количество просмотров10K
Понадобилась тут такая «штука», как TrackBar только с двумя ползунками, готового решения на jQuery не нашел, решил писать самостоятельно, правда не на jQuery а на чистом JS. Вроде от этого хуже не стало. «Штука» эта нужна была для выбора числовых значений в формах информационного киоска.

Как видите у аппарата нет клавиатуры, да и вообще тачскрин — штука не очень удобная, поэтому нужно было сделать очень удобной «штуку», что-бы нажатие в любое место, а не только на самих ползунках, воспринимался как желание перетащить ползунки. Кроме того в процессе тестирования выяснилось что пользователи все равно норовят надавить за пределы контролла, когда ползунок стоит в крайнем положении. Пришлось дороботать, сделать по краям зазоры (Margins), доступный для нажатия но не для перемещения ползунка, как-то так:

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

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

Сам скрипт лежит здесь.

А пример использования можно посмотреть здесь или скачать отсюда.
Теги:
Хабы:
+83
Комментарии110

Публикации

Истории

Работа

Ближайшие события

Weekend Offer в AliExpress
Дата20 – 21 апреля
Время10:00 – 20:00
Место
Онлайн
Конференция «Я.Железо»
Дата18 мая
Время14:00 – 23:59
Место
МоскваОнлайн