Example of Implementing Slider using jQuery UI (It can run on both Firefox and Google Chrome)
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" type="text/javascript"></script>
<style>
body { margin-left: 30px; margin-right: 15px; background-color: #ffffff }
h1{font: bold italic 20pt helvetica}
#mytext {
font-size: 24px
}
</style>
<script>
$(function() {
$( "#slider" ).slider({
value:50,
min: 0,
max: 100,
step: 1,
slide: function( event, ui ) {
$( "#mysetting" ).val( ui.value);
}
});
$( "#mysetting" ).val( $( "#slider" ).slider( "value" ) );
});
</script>
</head>
<body>
<center>
<div id="slider"></div>
<p/>
<output type="text" id="mysetting" />
</center>
</body>
</html>
Related:
- Implement Slider using jQuery
- jQuery Mobile: Slider
No comments:
Post a Comment