Saturday, January 28, 2012

Implement Slider using jQuery UI

jQuery UI provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.

Example of Implementing Slider using jQuery UI (It can run on both Firefox and Google Chrome)

Implement Slider using jQuery UI

<!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