<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Slider - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
function selectVolume(i_volume){
console.log('EVENT CHANGE: i_volume = ' + i_volume)
};
function saveVolume(i_volume){
console.log('EVENT STOP: i_volume = ' + i_volume)
};
$("#tv_volume").slider({
min: 0,
max: 100,
slide: function (event, ui){
$("#volume").val(ui.value);
selectVolume(parseInt(ui.value));
},
stop: function (event, ui){
saveVolume( parseInt(ui.value) );
},
});
});
</script>
</head>
<body>
<div id="tv_volume"></div>
</body>
</html>