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

Раздел: Programming / JavaScript @ 11.05.2008 | Ключевые слова: TrackBar ползунок TrackBar

Автор: homm
Источник: habrahabr

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

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

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

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

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

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

Распечатать статью