|
This is about how to build range slider, a slider with two handled value.
While browsing some ecommerce website for looking any inspiration for ecommerce projects, I found shopwiki.com website. This an ecommerce directory. You can buy almost everything sold by the traditional store here. The website navigator is easy to understand by user. It clear and simple, but effective.
My next Project in the internet application class is to build list or table from SQL Server database with ADO.NET in ASP.NET. I have look the list in this website shown with this table style and listing style. And I think my student can do both of that style in their projects.
Anyway, actually in this article I want to share about one interesting tool in this page . As you can see in the top right corner there are Filter panel like this :
These 2 sliding bar is for filtering the list in more specific price range and color. Than I want to discover how to include these slider in our website. I have not yet found the code for the color slider, but I have found it for the price range slider.
The price range slider called ‘two handled slider’ or ‘range slider’. While googling it I have found the first choice is with JQUERY UI. Yes it a very great range slider from provider with great collection of tools. But before using this collection I prefer to search the ‘lite’ one. And I found this script.
This script use this javascript : yui-range-slide.js
and this style sheet file : yui-range-slide.css
after download those 2 file, you can try this code:
<html>
<head>
<meta http-equiv=content-type content="text/html; charset=utf-8">
<title>DHTML Widget : Inline Range Slider</title>
<script src = "http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/yahoo_2.0.0-b3.js" ></script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/event_2.0.0-b3.js" ></script>
<script src="http://us.js2.yimg.com/us.js.yimg.com/lib/common/utils/2/dom_2.0.2-b3.js" ></script>
<script src = "yui-range-slide.js" ></script>
<link rel="stylesheet" type="text/css" href="yui-range-slide.css" />
</head>
<body>
<div id="mydiv">Price $1 to $100</div>
<span id="myslider" ></span>
<script type="text/javascript">
var oMS1 = new YAHOO.widget.RangeSlider( 'myslider' , {width:140,height:20,from:1,to:100});
oMS1.setValue(0,100);
var onMS1Slide = function(sType)
{
var aData = this.getValue();
document.getElementById('mydiv').innerHTML = 'Price $'+ aData[0] + ' to $'+ aData[1];
};
oMS1.onSlide.subscribe(onMS1Slide, oMS1 , true);
</script>
</body>
</html>
this is the display when you run the script.
The script show that we build slider with width 140 and height=20. With min value=0, and max value=100. First we set with setValue method for range 0 and 100 respectively.
And than, in this example, we take the Value1 and Value2 after any slide motion for updating the price text in the top of the slider. Of course for the system information like in above website, we need to passing those 2 value in another function, like AJAX function that doing query .
|
Kuliah TKI - Blog da...
mm Apparently, 21,000 boots imported by
Clas-class php yang ...
mm Apparently, 21,000 boots imported by
Kuliah TK Internet :...
mm Apparently, 21,000 boots imported by
The Power of GIS - U...
mm Apparently, 21,000 boots imported by
Kuliah TK Internet :...
mm Apparently, 21,000 boots imported by
JPGraph - membuat gr...
timberland - mm Apparently, 21,000 bo...
Kuliah TKI : Ajax - ...
mm Apparently, 21,000 boots imported by
Banner spesial untuk...
mm Apparently, 21,000 boots imported by