В этой статье мы создадим свой контроллер для управления громкостью, используя для этого jQuery UI Slider и оформим его своей темой.

Для начала заберем исходники изображение нашего ползунка в формате psd.

Шаг 1. jQuery UI

Для работы нашего проекта нам нужно подключить JavaScript библиотеки jQuery и jQuery UI. Можно использовать файлы из любого CDNGoogle Ajax API CDNMicrosoft CDN, Yandex API CDNjQuery CDN либо любым другим CDN или локальные.

Чтобы не загружать много лишнего, на сайте jQuery UI сохраним только плагин ползунка и его зависимости.

Затем подключаем к нашей странице скачанные файлы в низу странице перед тегом </body>:

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js"></script>

Шаг 2. HTML-разметка

Разметка HTML выглядит очень просто. Для этого на страницу с разметкой HTML5 вставляем следующий код:

<section>
	<span class="tooltip"></span>
	<div id="slider"></div>
	<span class="volume"></span>
</section>

Здесь мы прописываем контейнеры для подсказки, ползунка и иконки громкости. Все остальное jQuery UI сгенерирует сам.

Шаг 3. Подключаем ползунок

Код ниже инициализирует ползунок с настройками по умолчанию.

jQuery(function() {
	jQuery( "#slider" ).slider();
});

Теперь немного его изменим, чтобы работа ползунка лучше подходила нашей задаче.
Во-первых, сохраним элемент ползунка как переменную:

jQuery(function() {
	var slider = jQuery('#slider');
});

Затем мы устанавливаем минимальное значение для ползунка, чтобы после загрузки его значение было около 35.

slider.slider({
	range: "min",
	value: 35,
});

Шаг 4. Стиль оформления

Для того, чтобы создать стиль для оформления ползунка, нам нужно вырезать текстуры из psd-исходника

Если вы не знаете, как нарезать, можете посмотреть следующий ролик.

Перейдем к созданию стиля. Начнем с того, что зададим элементу body фон и переместим ползунок в центр страницы.

body {
	background: url('../images/bg.jpg') repeat top left;
}
section {
	width: 150px;
	height: auto;
	margin: 100px auto 0;
	position: relative;
}

Далее мы будем применять стили для подсказки, значка громкости, ручки, диапазона ползунка и самого ползунка.

Ползунок

Так как мы не определяем максимальное значение ползунка, то примем значение по умолчанию, задаваемое jQuery UI, то есть 100 пикселей.

#slider{
	border-width: 1px;
	border-style: solid;
	border-color: #333 #333 #777 #333;
	border-radius: 25px;
	width: 100px;
	position: absolute;
	height: 13px;
	background-color: #8e8d8d;
	background: url('../images/bg-track.png') repeat top left;
	box-shadow: inset 0 1px 5px 0px rgba(0, 0, 0, .5),
  				 0 1px 0 0px rgba(250, 250, 250, .5);
	left: 20px;
}

Подсказка

Подсказка будет позиционироваться над ползунком. Для этого зададим абсолютное позиционирование, сместив ее на 25 пикселей выше.

.tooltip {
	position: absolute;
	display: block;
	top: -25px;
	width: 35px;
	height: 20px;
	color: #fff;
	text-align: center;
	font: 10pt Tahoma, Arial, sans-serif ;
	border-radius: 3px;
	border: 1px solid #333;
	box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, .3);
	box-sizing: border-box;
	background: linear-gradient(top, rgba(69,72,77,0.5) 0%,rgba(0,0,0,0.5) 100%);
}

Значок громкости

Изменим немного значок громкости, чтобы он показывал текущий уровень громкости.

.volume {
	display: inline-block;
	width: 25px;
	height: 25px;
	right: -5px;
	background: url('../images/volume.png') no-repeat 0 -50px;
	position: absolute;
	margin-top: -5px;
}

Ручка ползунка

Ручка ползунка будет выглядеть как металлический круг, вырезанная из psd. Чтобы пользователь мог понять, что ее можно перемещать, добавим изменение курсора мыши при наведении на ручку ползунка.

.ui-slider-handle {
	position: absolute;
	z-index: 2;
	width: 25px;
	height: 25px;
	cursor: pointer;
	background: url('../images/handle.png') no-repeat 50% 50%;
	font-weight: bold;
	color: #1C94C4;
	outline: none;
	top: -7px;
	margin-left: -12px;
}

Диапазон ползунка

Диапазон ползунка будет иметь градиентную заливку:

.ui-slider-range {
	background: linear-gradient(top, #ffffff 0%,#eaeaea 100%);
	position: absolute;
	border: 0;
	top: 0;
	height: 100%;
	border-radius: 25px;
}

Шаг 5. Эффекты

На этом шаге займемся оформлением эффектов.

Подсказка

Подсказка будет отображать текущее значение ползунка и появляться возле ручки ползунка.

Сохраним элемент подсказки в переменную для дальнейшего обращения:

var tooltip = jQuery('.tooltip');

Затем мы займемся эффектом подсказки при возникновении события изменения значения ползунка:

slide: function(event, ui) {
	var value = slider.slider('value'),
	tooltip.css('left', value).text(ui.value);

Так же мы хотим, чтобы подсказка изначально была скрыта:

	tooltip.hide();

После того, как ручка ползунка собирается начать перемещение, подсказка будет плавно появляться на экране.

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

И, когда пользователь прекращает перемещение ручки ползунка, подсказка плавно исчезает:

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

Значок громкости

Теперь перейдем к созданию анимации для значка громкости.

Как и прежде, сохраним элемент значка громкости в переменную:

volume = jQuery('.volume');

Когда значение ползунка меньше или равно 5, значок громкости не будет отображать бары. Когда значение ползунка увеличивается объем бар начнет повышаться.

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

Конечный вариант кода

jQuery(function() {

	var slider  = jQuery( '#slider' ),
	    tooltip = jQuery( '.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 = jQuery( '.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' );
		}
	});

});

Пример Исходник

  • Владимир

    Отлично! То что надо 🙂