Price Slider with two knobs....
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Dheerendra Verma</title>
<link rel="stylesheet" href="css/slider.css" />
<script type="text/javascript" src="mootools12_all_p.js"></script>
<script type="text/javascript" src="slider.js"></script>
<script type="text/javascript" >
// ON LOAD
window.addEvent('domready', function () {
var mySlideA = new
Slider($('slider_minmax_gutter_m'), $('slider_minmax_minKnobA'), $('slider_bkg_img'), {
start: 0,
end: 5,
offset: 8,
snap: false,
onChange: function (pos) { $('slider_minmax_min').setHTML('min ' + pos.minpos); $('slider_minmax_max').setHTML('max ' + pos.maxpos); }
},
$('slider_minmax_maxKnobA')).setMin(2).setMax(3);
var mySlideB = new
Slider($('slider_gutter_1'), $('slider_knob_1'), $('slider_bkg_img_1'),
{
start: 0,
end: 120,
offset: 10,
onChange: function (pos) {
$('slider_current_val').setHTML(pos
+ ' inches');
}
}, null).setMin(100);
$('slider_current_val').setHTML(100 + ' inches');
// In this slilder example silder moves 10 steps with
an increament of 15 in every step
var mySlideC = new
Slider($('slider_gutter_C'), $('slider_knob_C'), $('slider_bkg_img_C'),
{
start: 0,
end: 150,
offset: 0,
snap: true,
numsteps: 10,
onChange: function (pos) {
$('slider_current_val_2').setHTML(pos
+ ' inches');
}
}, null).setMin(30);
$('slider_current_val_2').setHTML(30 + ' inches');
});
</script>
<style>
body {
margin:25px;
font-family:"trebuchet
MS", Tahoma;
font-size:13px;
border:1px solid #cfcfcf;
padding:20px;
}
.clearfix {
clear:both;
display:block;
}
.text {
color:#555555;
}
</style>
</head>
</body>
<div class="slider_outer" >
<h3>Price Range</h3>
<div class="slide_container"
>
<div id="slider_minmax_min" class="floatl fontblue"> </div>
<div class="slider_gutter"
id="minmax_slider"
>
<div id="slider_minmax_gutter_l"
class="slider_gutter_item
iconsprite_controls"></div>
<div id="slider_minmax_gutter_m"
class="slider_gutter_item
gutter iconsprite_controls">
<img id="slider_bkg_img"
src="images/bkg_slider.gif"/>
<div id="slider_minmax_minKnobA"
class="knob"></div>
<div id="slider_minmax_maxKnobA"
class="knob"></div>
</div>
<div id="slider_minmax_gutter_r"
class="slider_gutter_item
iconsprite_controls"> </div>
</div>
<div id="slider_minmax_max"
class="floatl
fontblue"> </div>
<div class="clearfix"></div>
</div>
</div>
</body>
</html>
Great work...........
ReplyDeletethank u..
ReplyDelete