0

What is the correct syntax for getting the value of a specific handle with a jQuery UI Range Slider? The method given in the demo and used in the function below gets the value of both handles $("#selector").slider("option", "values");

I've tried both: ("option", "values[0]") and ("option", "ui.values[0]")

The function below allows me to display values of each handle separately, but I also need to set the value of their associated form elements and the same syntax doesn't seem to work for that. I've posted a fiddle of this function here: http://jsfiddle.net/chayacooper/Xn9sf/

$("#priceRange").slider({
    range: true,
    min: 0,
    max: 1000,
    values: [0, 1000],
    step: 25,
    slide: function (event, ui) {
        $("#min_price").text("$" + ui.values[0]);
        $("#max_price").text("$" + ui.values[1]);
        var minPriceRange = $("#priceRange").slider("option", "values");     
        $("#min_price_range").val(minPriceRange);
        var maxPriceRange = $("#priceRange").slider("option", "values");
        $("#max_price_range").val(maxPriceRange);
    }
});

HTML

<div id="priceRange"></div>
<div id="min_price">$0</div>
<div id="max_price">$1000</div>
<input type=text name="min_price_range" id="min_price_range" />
<input type=text name="max_price_range" id="max_price_range" />
Chaya Cooper
  • 2,566
  • 2
  • 38
  • 67

1 Answers1

0

You're already using the values in setting the #minprice and #maxprice, so use the same values for setting the values of the inputs:

$("#priceRange").slider({
    range: true,
    min: 0,
    max: 1000,
    values: [0, 1000],
    step: 25,
    slide: function (event, ui) {
        $("#min_price").text("$" + ui.values[0]);
        $("#max_price").text("$" + ui.values[1]);

        $("#min_price_range").val(ui.values[0]);
        $("#max_price_range").val(ui.values[1]);
    }
});
jmoerdyk
  • 5,544
  • 7
  • 38
  • 49