Here's a simple jQuery, HTML, CSS code for a volume adjustment, you can also add to the CSS to style it more if you'd like to.
jQuery UI
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui-1.8.21.custom.min.js"></script>
HTML
<section>
<span class="tooltip"></span>
<div id="slider"></div>
<span class="volume"></span>
</section>
Volume adjustment
$(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');
},
});
});
CSS
.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;
}