Using jquery UI range Slider, getting the value

Question

I'm using the Jquery UI slider to allow the user to increase/decrease the range of a selection, I need to know (according to the original value of the slider) if the user wants to increase or decrease.

Here is my function, I'm not sure where to put the code for retrieving the original value before it changes. Can anyone help me with this?

Any help/suggestions is appreciated!

function createRangeSliderOutOfIframe(kinorid) {
    $("#slider-range" + kinorid).slider({
        animate: true,
        step: 1,
        min: 1,
        max: 6,
        value: 1,

        slide: function (event, ui) {

        },
        change: function (event, ui) {
            if (ui.value >= 1) {

                var add = '<span class="kSelectedA">Link</span>';

                $("#myFrame").contents().find('*').each(function () {
                    if ($(this).attr('kinorid') == kinorid) {
                        if (count == 0) {
                            $(result).parent().before(add);
                            count += 1;
                        }  
                        else if (count <= 6 && count != 0) {
                            result = $(this).parent();
                            for (i = 0; i < count; i++) {
                                result = $(result).parent();
                                //test += 1;
                            }
                            $(result).parent().before(add);
                            count += 1;

                            $('#trackingInfo').append('<br/>The range of the selection Increased<br/>The new range is now a' + $(result).parent().get(0).nodeName + 'node');
                            //alert(count);
                        }

                    }
                });

            }

        }
    });
    //$("#amount"+kinorid).val("$" + $("#slider-range" + kinorid).slider("value"));
    var value = $("#slider-range" + kinorid).slider("option", "value");
    alert(value);
}

Thank you

score 8 · Accepted Answer · answered Jun 14 '11 at 13:55

In general, you can determine the starting value of the slider by tapping into the start event:

$("#selector").slider({ start: function(event, ui) { ... });

Combine that with the change or stop event, and you can determine whether the user increased or decreased the value of the slider:

var start = 0;
$("#slider").slider({
    start: function(event, ui) {
        // ui.value is the starting value
        start = ui.value;
    },
    stop: function(event, ui) {
        // now ui.value is the value the user set after stopping the sliding.
        $("#delta").text(ui.value > start ? "increasing" : "decreasing");
    }
});

Here's a working example that determines if you increased or decreased the slider's value. Hope that's what you're looking for: http://jsfiddle.net/andrewwhitaker/rwKsh/

@Andrew, if you use the slide event rather than the stop, you can get real time updating of the #delta span tag. — The Muffin Man, Sep 13 '11 at 21:02

Using jquery UI range Slider, getting the value

1 Answers1