Hello Reader if you wan to make range selector UI using jquery this blog will be helpfull to you.
Lets start making this UI. First you have to create html file and it's code will go like this:-
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
<p>
<label for="currency">Price range:</label>
<input type="text" id="currency"
style="border:0; color:green; font-weight:bold;">
</p>
<div id="oneDiv"></div>
</body>
</html>
Now create the Jquery script which which make UI selector in range. And it's code will go like this:-
<script>
$(function() {
$( "#oneDiv" ).slider({
range:true,
min: 0,
max: 470,
values: [ 39, 470 ],
slide: function( event, ui ) {
$( "#currency" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
}
});
$( "#currency" ).val( "$" + $( "#oneDiv" ).slider( "values", 0 ) +
" - $" + $( "#oneDiv" ).slider( "values", 1 ) );
});
</script>
Now when you load this page you will see the range selector is shown up. When you select its minimum limit it will show the pointer value, Similarly if you select it's maximum value it will show it's pointer value. This type of UI is very usefull in making the searching the product with currency range. And you can easily attach it to your search page.
0 Comment(s)