pav
10/5/2013 - 12:49 PM

Slider

Slider

style.css
content_copyfile_download
body {
    font-family:sans-serif;
    font-size:16pt;
    font-weight:bold;
}
.panel {
    text-align:center;
    line-height:20pt;
    background: #F3F3F3;
    padding:5pt;
}
slider.html
content_copyfile_download
<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>
script.js
content_copyfile_download
$(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")
               )
        }   
	});
});