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

Code:

<!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

Code:

<!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>

Thread: javascript two handle slider problem

Thread Tools

Search Thread

javascript two handle slider problem

Bookmarks

Bookmarks

Posting Permissions