Asked By
belensienna
10 points
N/A
Posted on - 05/03/2013
Â
Hi guys
I am a JavaScript user using the jquery libraryand I am working on a project which requires me to add a range bar to a few pages that I am working on. What I need is help in creating the range bars jquery can enable me to create with the least possible coding involved.
If anybody can help me by providing a quick guideline on how to create a range bar using jquery then please reply to this post. Thanks guysÂ
Creating range bars in jQuery
To create a JQuery range bar you need JQuery UI.You can download JQuery UI from the JQuery website here.
Once you have the library you include it in your project using script tags like:
<script type="text/javascript" src="location of the lib"></script>
You also include the JQuery lib similarly.
Consider the markup below that I use for a range slider:
<html>
<head>
<link rel="stylesheet" href="theme/jquery.ui.all.css>
<script src="jquery-1.7.1.js"></script>
<script src="ui/jquery.ui.core.js"></script>
<script src="ui/jquery.ui.widget.js"></script>
<script src="ui/jquery.ui.mouse.js"></script>
<script src="ui/jquery.ui.slider.js"></script>
$(function(){
$('#rangeslider').slider({
range: true, min: 0, max: 500, values: [ 75, 300 ], slide: function( event, ui ) {
}
});
});
</head>
<body>
<div id="rangeslider">
</div>
</body>
</html>
The above sample code creates a range slide with min and max values of 0 and 500 respectively.
It is initialized with values 75 and 300.
The slide event is handled when the user slides the slider.
The JQuery UI also comes with the docs for all the widgets.
