Mootools Slider with Range Indicator V.2.20 (Version using Clipped Image)

Changes in this version 2.20:
1. There was major issue with the earlier versions ( as kindly pointed out by Wanlee -in comment #9), where setting smaller values of the ’start’ and ‘end’ made the clipping wonky. This issues has been fixed in this version .
Wanlee also made an observation that , both sliders end up with the same value and that it would be nice to make the max slider stop at the next number greater than the min slider instead of the sliders butting up together. Well! I did think of trying to do this, but now I personally feel that, they must have the same values. what say?

2. On Wanlee's and Brian's request , I did add the Snap and Slider Steps option .... but it is still requires some fine tuning ( which I have been trying hard) and still has soe issues... Avoid using this feature, if possible .... if you desperately need the slide step feature, do use in care ... play around with the CSS and JS a bit to achive your desired results ... If you find a fix , do let us know!

Changes in this version 2.11:
1. Added feature to slide in defined number of steps ( check the third expamle) (There are issues with this implemention, so if you donot need sliding in steps , use version 2.1)

Changes in this version 2.1:
1. Fixed the first time crossing of Min Knob over Max Knob

Changes in this version 2:
1. Slider uses and absolutely palced CLIPPED image ( Slider gutter range) to indicate the slider range , instead of a division with background image 2. The Min and Max Slider Knobs are restricted from crossing over each other
Advantage of this version:-Now you can have a range Image, that can indicate range with its Color too … What I mean is for eg. you could have an image with green,orange and red areas, so the selected range will indiate the nature of the range selected as well. Disadvantage : The slider image is shown with its full width , until the complete Script is loaded.

Mootols Slider with two knobs ( Minimum and Maximum Knobs)



Mootols Slider with one knob



Slide Steps: Mootols Slider with one knob and defined number of Steps



Download this slider v2.20 sourcefiles
The stuff below is for display and anlytics only, and is not required for the actual demo