MajorDoMo

Код: Выделить всё

src="demo/js/jquery-1.7.2.min.js"
src="demo/js/jquery-ui-1.8.21.custom.min.js"

        $(function() {

            //Сохраняем нужные элементы в перменных
            var slider  = $('#slider'),
                tooltip = $('.tooltip');

            //Скрываем подсказку в начале
            tooltip.hide();

            //Вызываем слайдер
            slider.slider({
                //Конфигурация
                range: "min",
                min: 1,
                value: 35,

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

                //Событие слайдреа
                slide: function(event, ui) { //При пермещении слайдера

                    var value  = slider.slider('value'),
                        volume = $('.volume');

                    tooltip.css('left', value).text(ui.value);  //Выравниваем подсказку соответственно

                    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');
                    };

                },

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

        }); 

Код: Выделить всё

Примечание: Функция $(function(){...}); ведёт себя также как и $(document).ready(function(){...});. Т.е. её можно использовать для оборачивания других операций $() на странице, которым для выполнения необходимо,
 чтобы DOM-дерево было полностью построено браузером.
Например, выполнить функцию после того, как DOM-дерево станет доступно для использования:

$(function() {
  //DOM-дерево готово
});

Например, для безопасного выполнения jQuery кода Вы можете использовать следующую конструкцию:

jQuery(function($) {
  //DOM-дерево готово
});
В этой конструкции в качестве функции jQuery используется $. Безопасность выполнения этого сценария заключается в том, что
 код jQuery, находящейся в этой конструкции не будет конфликтовать с другими библиотеками JavaScript, в которых в качестве
 псевдонима тоже используется знак $. Кроме этого этот сценарий также не будет зависеть от переменной, которая установлена
 в качестве глобального псевдонима функции jQuery.