Question

I am using jquery UI range slider in my site, I need to create a function for when the user increases the range and a different one for when the user decreases the range, how can i do that?
thanks

function createRangeSliderOutOfIframe(kinorid) {
//alert("in edit");
var addRangeSlider = '<div class="rangeSlider"><p><label for="amount' + kinorid + '">Increase Range of Selection:</label></p><div id="slider-range' + kinorid + '"></div>'; //Jquery UI slider
$('#trackingInfo').append(addRangeSlider);
//$("#slider-range" + kinorid, window.parent.document).show();
var count = 0;
var result = $(this).parent();
var i;
$("#slider-range" + kinorid).slider({
    animate: true,
    step: 1,
    min: 0,
    max: 10,
    value: 5,

    change: function (event, ui) {
        var currentValue = ui.value;
        alert(currentValue + "original");
        var value = $("#slider-range" + kinorid).slider("option", "value");
        alert(value+"new");
        if (ui.value >= 5) {
            //if (!$(getSelectionParentElement).parent().prev().hasClass('kSelectedA') || !$(getSelectionParentElement).children().next().hasClass('rangeSlider')) {
            alert(count);
            var add = '<span class="kSelectedA">Link</span>';

            $("#myFrame").contents().find('*').each(function () {
                if ($(this).attr('kinorid') == kinorid) {
                    //alert("change");
                    if (count == 0) {
                        $(result).parent().before(add);
                        count += 1;
                    }
                    else if (count <= 5 && count != 0) {
                        result = $(this).parent();
                        for (i = 0; i < count; i++) {
                            result = $(result).parent();
                            //test += 1;
                        }
                        $(result).parent().before(add);
                        count += 1;
                        $('#trackingInfo').append('The range of the selection was increased<br/> ');
                        alert(count);
                    }

                }
            });

        }
        if (ui.value < 5) {
            //if (!$(getSelectionParentElement).parent().prev().hasClass('kSelectedA') || !$(getSelectionParentElement).children().next().hasClass('rangeSlider')) {
            count -= 1;
            alert("in if out");
            if ($(result).children().hasClass('kSelectedA')) {
                alert("in if");
                $(result + '.kSelectedA').remove();
            }
            //alert("second if");
            //$('.kSelectedA').remove();
        }

    }
});
/* $("#amount" + cId, window.parent.document).val($("#slider-range" + cId, window.parent.document).slider("values", 0) +
" - " + $("#slider-range" + cId, window.parent.document).slider("values", 1));*/

}

Answer 1

Taken from the jQuery UI site:

This event is triggered on every mouse move during slide. Use ui.value (single-handled sliders) to obtain the value of the current handle, $(..).slider(‘value’, index) to get another handles’ value.

Return false in order to prevent a slide, based on ui.value.

Code examples

Supply a callback function to handle the slide event as an init option.

$( ".selector" ).slider({
   slide: function(event, ui) { ... }
});
Bind to the slide event by type: slide.
$( ".selector" ).bind( "slide", function(event, ui) {
  ...
});