Posts Tagged ‘ Range Slider ’

Mootools Slider With Two Knobs (Double Pinned Slider) with Range Indicator

Friday, October 24th, 2008 By Nikhil

I had been looking for a double pinned slider (slider with two knobs , minimum and maximum) using mootools. Though , I did find a few  well done double pinned slider in the mootools forum, The only problem was that all these sliders  dint have the selected range marker.  Finally! I decided to  create my own. Well! I did use the original code  and modify it to have a slider background that indicated the range selected visually, as in my example below. The BLUE areas indicates the range of value chosen.

View Version 2.2 Demo | Download Mootools Double Pinned Slider Version 2.2 (Downloaded 17768 times)
mootools double pinned slider

You can very easily change the look and feel of the  range indicator ( in blue in the above example), slider knob, the slider track by modifying the slider.css as required.

Do drop me a comment if you find it useful.


get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter


 Subscribe to ExpressingIT RSS
get ExpressingIT News by Email Subscribe to ExpressingIT by Email
 Follow Me on Twitter