Q:

Capturing the values of jquery slider

I have created jquery slider which works fine. I have divided slider into three category.
    var setRatingValue = function() {
        // Set text
        var ratingValue = $("#rating-slider").slider("value");
        $("#rating-value").text('yellow');
        // Change the background colour of the slider
        //var hsl = "hsl("+ratingValue+", "+50+"%, "+50+"%)";
var color = '';
if(ratingValue > 0 & ratingValue <= 30)
    color = 'red';

else if(ratingValue > 30 & ratingValue <= 70)
    color = 'blue';

else if(ratingValue > 70 & ratingValue < 100)
    color = 'green';

        $(".ui-slider-range").css("background", color);
        // Set text colour
        $("#rating-value").css("color", color);
    };

Slider looks like this : http://jsfiddle.net/BxY99/2/ Which is not same which I have used. 
It take continous values of slider. 
I want to alert the value of slider Only if it's value change from one of these cateogry (0 to 30, 31 to 70, 71 to 100). 
Currently what happens it alerts each value when slider is moved. 
Any help is appreciable 

A:

You can use the slide event or the change event that the API has,
Those events pass as function parameters the event and a ui object where you can retrieve the value by ui.value,
Then you can use:
$(".slider").slider({
    value: 50,
    slide: function (event, ui) {
        myFunction(event, ui);
    }
});

Demo

