Getting Values From Html Inputs

I have an input element that is a range slider that I wanted to turn into a slider with a lower and an upper bound. This feature isn't implemented yet for range although it's being

Solution 1:

Just trigger the change() method for input while changing it's value.

Try this:

DEMO: FIDDLE

 $(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]).change();
            }
        });
        $("#amount").val($("#slider-range").slider("values", 0) +
            " - " + $("#slider-range").slider("values", 1)).change();
    });

Solution 2:

You can use the change event of jQuery UI Range Slider. Use it and append updated changes to stuff like below.

$(function () {
        var changes = '';
        $("#slider-range").slider({
            range: true,
            min: 0,
            max: 500,
            values: [75, 300],
            slide: function (event, ui) {
                $("#amount").val(ui.values[0] + " - " + ui.values[1]);
            },
            change: function (event, ui) {
                changes += '<div>' + ui.values[0] + " - " + ui.values[1] + '</div>';
                $("#stuff").html(changes);
            }
        });
        $("#amount").val($("#slider-range").slider("values", 0) +
            " - " + $("#slider-range").slider("values", 1));

    });