Creating range bars in jQuery

Asked By 10 points N/A Posted on -
qa-featured

 

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 

  • Answer Accepted: No
  • Question Category:
SHARE
Answered By 0 points N/A #141682

Creating range bars in jQuery

qa-featured

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.

About Barnes Redfield
Questions
4
Answers
6
Best Answers
0
  • Posted on -
  • Question Category:

Download tansee iPhone transfer contacts

Previous

Mass spectrometry software for android

Next

Related Questions