hcmn · July 11, 2012 20:27
diff --git a/index.html b/index.html
 <html>
 <head>
    <title>Sliders!</title>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/base/jquery-ui.css"/>        
    <link rel="stylesheet" href="style.css"/>
 </head>
 <body>
    <div class="panel">
        <div id="slider"></div>
        <p>
            Volume : <span id="volume">0</span>%
        </p>
    </div>
 </body>
 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
 <script src="script.js"></script>
 </html>
diff --git a/script.js b/script.js
 $(function() {
 	$("#slider").slider({
        stop: function ( event, ui ) {
            
           // Use jQuery to select the 'volume' <span> and then
           // set it to the value of the slider.
           $('#volume').html($('#slider').slider("value"));
           
        }   
 	});
 });
diff --git a/style.css b/style.css
 body {
    font-family:sans-serif;
    font-size:16pt;
    font-weight:bold;
 }
 .panel {
    text-align:center;
    line-height:20pt;
    background: #F3F3F3;
    padding:5pt;
 }
	<html>
	<head>
	<title>Sliders!</title>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/base/jquery-ui.css"/>
	<link rel="stylesheet" href="style.css"/>
	</head>
	<body>
	<div class="panel">
	<div id="slider"></div>
	<p>
	Volume : <span id="volume">0</span>%
	</p>
	</div>
	</body>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js" type="text/javascript"></script>
	<script src="script.js"></script>
	</html>
	$(function() {
	$("#slider").slider({
	stop: function ( event, ui ) {

	// Use jQuery to select the 'volume' <span> and then
	// set it to the value of the slider.
	$('#volume').html($('#slider').slider("value"));

	}
	});
	});