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

Asked 28/2, 2012 at 10:13 Answered 27/6, 2017 at 18:15

Solved jquery jquery-ui jquery-ui-slider

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 slider with input from a single textbox

$("#slider").slider({
    value: 1,
    step: 1000,
    min: 0,
    max: 5000000,
    slide: function(event, ui) {
        $("input").val("$" + ui.value);
    }
});
$("input").change(function () {
    var value = this.value.substring(1);
    console.log(value);
    $("#slider").slider("value", parseInt(value));
});

Any suggestion?

EDIT:

<div class="demo">
    <input type="text" class="sliderValue"  />
        <p>
        </p>
        <div id="slider"></div>
    </div>

and

  $("#slider").slider({
        range: "min",
        value: 1,
        step: 10,
        min: 0,
        max: 1000,
        slide: function (event, ui) {
            $("input").val(ui.value);
        }
    });


    $("input").change(function (event) {
        var value1 = parseFloat($("input").val());
        var highVal = value1 * 2;
        $("#slider").slider("option", { "max": highVal, "value": value1 });
    });

Lurid answered 28/2, 2012 at 10:13 Comment(3)

Unfortunately, multiple slider handles are incompatible with the range: "min" option. Would it be possible to drop that option? – Wagstaff 28/2, 2012 at 11:46

@FrédéricHamidi :yes thats just a sample – Lurid 28/2, 2012 at 11:47

What problem are you having exactly? – Fibro 28/2, 2012 at 13:19

Assuming you have two <input> elements:

<input type="text" class="sliderValue" data-index="0" value="10" />
<input type="text" class="sliderValue" data-index="1" value="90" />

And a slider placeholder element:

<div id="slider"></div>

You can use the values option to put the slider widget in multiple handle mode, and synchronize the values of the <input> 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.

Frau answered 28/2, 2012 at 13:25 Comment(7)

:Thanks but the handles are overlapping – Lurid 28/2, 2012 at 13:40

It does indeed, you can specify the range: true option to inhibit this behavior. Updated fiddle here. – Wagstaff 28/2, 2012 at 13:44

This code is working fine with masterpage but the code in my EDIT portion is returning an error Server Error in '/Slid' Application. The state information is invalid for this page and might be corrupted. – Lurid 29/2, 2012 at 9:53

This looks like a view state issue, I don't think jQuery UI is related to the problem at all. Are you tinkering with the __VIEWSTATE hidden input element? See also social.msdn.microsoft.com/Forums/sv-SE/netfxbcl/thread/… for a similar problem and its solution. – Wagstaff 29/2, 2012 at 9:59

Hey Frédéric Hamidi - I used your answer and it works best. But I am really facing one issue when I am having multiple sliders on page. When I add multiple sliders - if I change first handle it also sets second handle of that slider to some old value. is it like data-index issue because I have data index 0 and 1 for all input boxes. – Kristoforo 21/12, 2015 at 15:0

@FrédéricHamidi - Thanks for that JS fiddle. I was wondering if you might be able to help me with trying to create darker background color between the two handles. Similar to the effect on AirBNB's price slider: airbnb.ca/s/kingston?ss_id=neqj0j67&s_tag=ZXhqi4zn – Henricks 26/2, 2016 at 2:44

Usually you're not allowed to choose max_value < min_value. So if you use this condition here, we have a problem at both sliders at value "0", as they do not move – Pickford 7/9, 2016 at 12:3

From the official jQuery UI Documentation: https://jqueryui.com/slider/#range

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>jQuery UI Slider - Range slider</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
</head>
<body>

    <p>
        <label for="amount">Price range:</label>
        <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
    </p>
    <div id="slider-range"></div>

    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script>
        $( function() {
        $( "#slider-range" ).slider({
        range: true,
        min: 0,
        max: 500,
        values: [ 75, 300 ],
        slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        }
        });
        $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
        " - $" + $( "#slider-range" ).slider( "values", 1 ) );
        } );
    </script>

</body>
</html>

Cockroach answered 27/6, 2017 at 18:15 Comment(0)

Recommended topics

Hot tags