Jquery UI slider with two handles with input from two text box?

Question

I need a jquery slider with two handles with inputs from two textbox like this http://www.israel-diamonds.com/search/diamonds/default.aspx .Currently i have a single handle

Answer 1

Assuming you have two elements:

And a slider placeholder element:

You can use the values option to put the slider widget in multiple handle mode, and synchronize the values of the elements with:

$("#slider").slider({
    min: 0,
    max: 100,
    step: 1,
    values: [10, 90],
    slide: function(event, ui) {
        for (var i = 0; i < ui.values.length; ++i) {
            $("input.sliderValue[data-index=" + i + "]").val(ui.values[i]);
        }
    }
});

$("input.sliderValue").change(function() {
    var $this = $(this);
    $("#slider").slider("values", $this.data("index"), $this.val());
});

You can see the results in this fiddle.