PDA

View Full Version : javascript two handle slider problem



ankit1_nandekar
11-07-2011, 06:58 AM
before reading this thread please visit this link
http://www.bluenile.co.uk/diamond-search?filter_id=0
and see the slider for a price

i am new in javascript can any tell me how to create a price slider like this above link .its argent please reply me.

jscheuer1
11-07-2011, 09:20 AM
<!DOCTYPE html>
<html>
<head>
<title>jQuery Slider - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#slider, .results {
margin: 10px;
width: 300px;
font-size: 12px;
}
#val1 {
float: left;
}
#val2 {
float: right;
}
.results {
overflow: hidden;
font: normal 14px verdana, arial, sans-serif;
color: gray;
}
</style>
<script>
jQuery(function($){
$("#slider").slider({
range: true,
values: [195, 2000],
max: 2000,
min: 195,
slide: function(e, ui){
$('#val1').text(ui.values[0]);
$('#val2').text(ui.values[1]);
}
});
});
</script>
</head>
<body>

<div id="slider"></div>
<div class="results"><span id="val1">195</span>
<span id="val2">2000</span></div>
</body>
</html>

For more information, see:

http://docs.jquery.com/UI/Slider

vwphillips
11-07-2011, 10:50 AM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.slider {
position:relative;overflow:hidden;left:0px;top:0px;width:300px;height:20px;border:solid red 1px;
}

.handle {
position:absolute;left:0px;top:0px;width:20px;height:20px;background-Color:#FFCC66;
}

.sliderV {
position:relative;overflow:hidden;left:0px;top:0px;width:20px;height:220px;border:solid red 1px;
}

/*]]>*/
</style></head>

<body>
<center>

<div id="tst" class="slider" >
<div class="handle" ></div>
<div class="handle" ></div>
</div>
<input id="ip1" size="10" />
<input id="ip2" size="10" />

<div id="tstV" class="sliderV" >
<div class="handle" ></div>
<div class="handle" ></div>
</div>
<input id="ip1V" size="10" />
<input id="ip2V" size="10" />



</center>

<script> vic=0; </script>
<form name=Show id=Show style="position:absolute;visibility:visible;top:700px;left:0px;" >
<input size=100 name=Show0 >
<input size=10 name=Show1 >
<input size=10 name=Show2 >
<input size=10 name=Show3 >
<input size=10 name=Show4 >
<input size=10 name=Show5 >
<input size=10 name=Show6 >
<input size=10 name=Show7 >
<input size=10 name=Show8 >
<input size=10 name=Show9 ><br>
<textarea name=TA rows=1 cols=100 ></textarea>
</form>

<script type="text/javascript">
/*<![CDATA[*/
// Min Max Slider (07-November-2011)
// by |Vic Phillips http://www.vicsjavascripts.org.uk/

// Functional Code Size 2.45K
function zxcMinMaxSlider(o){
var mde=o.Mode,mde=typeof(mde)=='string'&&mde.charAt(0).toUpperCase()=='V'?[1,'top','height']:[0,'left','width'],obj=document.getElementById(o.ID);
if (obj){
var divs=obj.getElementsByTagName('DIV');
if (divs[0]){
var objw=this.style(obj,mde[2]),hw=this.style(divs[0],mde[2]),mm=[0,objw-hw,objw-hw*(divs[1]?2:0)],ips=o.InputIDs,mv=o.MaxValue;
divs[0].style[mde[1]]=mm[0]+'px';
divs[1].style[mde[1]]=mm[1]+'px';
this.mde=mde;
this.hw=hw;
this.mm=mm;
this.divs=[divs[0],divs[1]];
this.complete=o.Complete;
this.ips=[document.getElementById(ips[0]),document.getElementById(ips[1])];
this.ips[0].value=0;
this.ips[1].value=mv;
this.mv=typeof(mv)=='number'?mv:false;
this.addevt(divs[0],'mousedown','down',divs[0]);
if (divs[1]){
this.addevt(divs[1],'mousedown','down',divs[1]);
}
this.addevt(document,'mousemove','move');
this.addevt(document,'mouseup','up');
}
}
}

zxcMinMaxSlider.prototype={

down:function(e,obj){
document.onselectstart=function(event){ window.event.returnValue=false; }
this.dobj=obj;
var divs=this.divs,ud=obj==divs[0],hw=this.hw,mde=this.mde;
this.os=ud?0:hw
this.min=ud?0:this.style(divs[0],mde[1])+hw;
this.max=ud?this.style(divs[1],mde[1])-hw:this.mm[1];
this.ip=this.ips[ud?0:1];
this.lastXY=[e.clientX,e.clientY];
this.drag=true;
if (!window.event) e.preventDefault();
return false;
},

move:function(e){
if (this.drag){
var mde=this.mde,mse=[e.clientX,e.clientY],lfttop=Math.min(this.max,Math.max(this.min,this.style(this.dobj,mde[1])+mse[mde[0]]-this.lastXY[mde[0]])),ip=this.ip,p=(lfttop-this.os)/this.mm[2],f=this.complete;
this.dobj.style[mde[1]]=lfttop+'px';
this.lastXY=mse;
if (ip){
ip.value=Math.round(p*(this.mv||1));
}
if (f){
f(p*100);
}
}
if (!window.event) ev.preventDefault();
return false;
},

up:function(){
if (this.drag){
this.drag=false;
document.onselectstart=null;
}
},

style:function(obj,p){
if (obj.currentStyle){
return parseInt(obj.currentStyle[p.replace(/-/g,'')]);
}
return parseInt(document.defaultView.getComputedStyle(obj,null).getPropertyValue(p));
},

addevt:function(o,t,f,p){
var oop=this;
if (o.addEventListener){
o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
}
else if (o.attachEvent){
o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
}
}

}

S=new zxcMinMaxSlider({
ID:'tst', // the unique ID name of the parent DIV. (string)
Mode:'Horizontal', //(optional) the slider type, 'Horizontal' or 'Vertical'. (string, default = 'Horizontal')
InputIDs:['ip1','ip2'], //(optional) the unique ID names of the INPUTS to display the results. (array, default = no display)
MaxValue:1222, //(optional) the maximum value to display. (number, default = percentage)
Complete:function(percent){ //(optional) the custom function the return the percentage. (function, default = no custom function)
document.Show.Show0.value=percent+' percent';
}
});



new zxcMinMaxSlider({
ID:'tstV',
Mode:'Vertical',
InputIDs:['ip1V','ip2V'],
MaxValue:1222
});



/*]]>*/
</script>


</body>

</html>