jquery UI Slider custom control volume image does not change if we i click on the slider bar

Question

I am using jquery UI slider for volume control.

Here's the link : http://media02.hongkiat.com/jquery-ui-slider/demo/index.html

Tutorial on this demo: http://www.hongkiat.com/blog/jquery-volumn-slider/

When you drag the slider, the volume icon changes accordingly ( as set using background image positions )

But the trouble is when you click on the slider bar instead of dragging, the volume icon takes up strange background positions. ( test by clicking multiple times at different points of the slider )

How to fix this ?

Any help, appreciated.

Answer 1

You can add the change listener and also compare the value there.

Demo http://jsfiddle.net/WqCkv/1/

Javascript:

//Store frequently elements in variables
    var slider = $('#slider'),
        tooltip = $('.tooltip');

    //Hide the Tooltip at first
    tooltip.hide();

    //Call the Slider
    slider.slider({
        //Config
        range: "min",
        min: 1,
        value: 35,

        start: function (event, ui) {
            tooltip.fadeIn('fast');
        },

        change: function (event, ui) {
            var value = slider.slider('value');
            setVolumeImage(value);
        },

        //Slider Event
        slide: function (event, ui) { //When the slider is sliding

            var value = slider.slider('value');
            setVolumeImage(value);
            tooltip.css('left', value).text(ui.value); //Adjust the tooltip accordingly
        },

        stop: function (event, ui) {
            tooltip.fadeOut('fast');
        }
    });


    function setVolumeImage(value) {
        volume = $('.volume');
        if (value <= 5) {
            volume.css('background-position', '0 0');
        } else if (value <= 25) {
            volume.css('background-position', '0 -25px');
        } else if (value <= 75) {
            volume.css('background-position', '0 -50px');
        } else {
            volume.css('background-position', '0 -75px');
        }
    }