JQuery UI Slider пользовательский контроль громкости изображения не меняется, если мы нажимаем на ползунок

Question

JQuery UI Slider пользовательский контроль громкости изображения не меняется, если мы нажимаем на ползунок

0

Я использую ползунок jquery UI для регулировки громкости.

Здесь ссылка: http://media02.hongkiat.com/jquery-ui-slider/demo/index.html

Учебник по этой демонстрации: http://www.hongkiat.com/blog/jquery-volumn-slider/

Когда вы перетаскиваете ползунок, значок тома изменяется соответствующим образом (как установлено с использованием положений фонового изображения)

Но проблема в том, что при нажатии на ползунок вместо перетаскивания значок тома занимает странные фоновые позиции. (тест, щелкнув несколько раз в разных точках слайдера)

Как это исправить?

Любая помощь, ценится.

Manu 08 май 2014, в 14:26

Источник

Теги:

javascript

jquery

html

css

jquery-ui

1 ответ

Ещё вопросы

Rob Schmuecker · Accepted Answer · 2014-05-08T11-36-00.000Z

Вы можете добавить change слушателя, а также сравнить value там.

Демо- версия 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');
        }
    }