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

Andrew Whitaker · Accepted Answer · 2011-06-14 13:55:37Z

8

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/

answered Jun 14, 2011 at 13:55

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

The Muffin Man Over a year ago

@Andrew, if you use the slide event rather than the stop, you can get real time updating of the #delta span tag.

Collectives™ on Stack Overflow

Using jquery UI range Slider, getting the value

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related