Question

As per this plugin http://flowplayer.org/tools/demos/rangeinput/index.html

Does anybody know how to add second handle to the range? I’ve asked this on official site but still no answer 🙁

Answer 1

What I do is make two ranges then move them one on top of the other, plus some code to prevent the minimum to go over the maximum:

var myform_from = $("#myform").find(".slider:first");
var myform_to = $("#myform").find(".slider:last");

myform_from.css("top", 16);
myform_to.css("top", -16);

This works fine with the first example from the jQuery tools website, and you get two handles.

The event handler to pervent the left from overtaking the right:

myform_from.change(function(){
    var val = myform_from.data("rangeinput").getValue();
    if(val >= myform_to.data("rangeinput").getValue()){
        myform_to.data("rangeinput").setValue(val);
    }
});

myform_to.change(function(){
    var val = myform_to.data("rangeinput").getValue();
    if(val <= myform_from.data("rangeinput").getValue()){
        myform_from.data("rangeinput").setValue(val);
    }
});

This way I don’t break the HTML5 semantics and I get two handles.