After scratching my head over this for a while I thought maybe I would have more luck with plan B. I could give each handle its own div inside the slider div and allow each slider to slide only inside that region. by adjusting the width of the container divs I could get notched sliders that don't overlap each other quite easily.
The only thing is I've hit an enormous snag. Each of the domain divs stack up on top of each other inside the slider div, and as soon as you slide the handle in the div that's behind the other div you can no longer drag it because the front div is in the way. Here is the revised code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/ TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml";> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> </head> <script type="text/javascript" src="/js/jquery/jquery.js"></script> <script type="text/javascript" src="/js/jquery/interface/ interface.js"></script> <style type="text/css"> /* Sliders */ .slider { width: 171px; height: 58px; position: relative; margin: 2px; padding: 0px; overflow: hidden; background: url(configurator%209/ui/configurator/range_chart.gif) no- repeat top; } .slider .domain { position: absolute; top: 0; width: 152px; height: 100%; opacity: 0.3; } .slider .domain.left { background: yellow; left: 0px; } .slider .domain.right { background: blue; right: 0px; } .slideHandle { width: 19px; height: 58px; position: absolute; font-size: 0; line-height: 0; overflow: hidden; border: none; top: 0px; } .leftHandle { background: url(configurator%209/ui/configurator/ range_handle_left.gif) no-repeat bottom; } .rightHandle { left: 133px; background: url(configurator%209/ui/configurator/ range_handle_right.gif) no-repeat bottom; } </style> <script type="text/javascript"> $(document).ready (function () { $('#left, #right').Draggable ({ containment : 'parent', grid : 17 }); //test = new RangeSlider ('#slider1', '#left', '#right', 0, 0, 0, 0); }); </script> <body> </body> <div class="slider" id="slider1"> <div class="domain left"> <div class="slideHandle leftHandle" id="left"> </div> </div> <div class="domain right"> <div class="slideHandle rightHandle" id="right"> </div> </div> </div> </html> Is it possible to get a click through the front layer to the handle behind? On Aug 15, 12:41 pm, Gordon <[EMAIL PROTECTED]> wrote: > As I just can't track down a javascript slider that can cope with two > handles satisfactorially, I am trying to implement my own using just > the Draggable functionality of the interface library. > > I need to make a slider for selecting a minimum and maximum limits of > a range of values that: > > * cope with 2 handles in the slider > * can snap the handles to notches while dragging, the size of which > doesn't change based on the position of either of the sliders > * will not allow the handles to either pass each other or overlap > > So far this is as far as I have got: > > <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/ > TR/xhtml11/DTD/xhtml11.dtd"> > <html xmlns="http://www.w3.org/1999/xhtml";> > <head> > <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> > <title>Untitled Document</title> > </head> > <script type="text/javascript" src="/js/jquery/jquery.js"></script> > <script type="text/javascript" src="/js/jquery/interface/ > interface.js"></script> > <style type="text/css"> > /* Sliders */ > .slider { > width: 171px; > height: 58px; > position: relative; > margin: 2px; > padding: 0px; > overflow: hidden; > background: url(configurator%209/ui/configurator/range_chart.gif) no- > repeat top;} > > .slideDomain { > position: absolute; > height: 100%;} > > .leftDomain { > left: 0px;} > > .rightDomain { > right: 0px;} > > .slideHandle { > width: 19px; > height: 58px; > position: absolute; > font-size: 0; > line-height: 0; > overflow: hidden; > border: none; > top: 0px;} > > .leftHandle { > background: url(configurator%209/ui/configurator/ > range_handle_left.gif) no-repeat bottom;} > > .rightHandle { > left: 152px; > background: url(configurator%209/ui/configurator/ > range_handle_right.gif) no-repeat bottom; > > } > > </style> > <script type="text/javascript"> > > function RangeSlider (slideContainer, slideMin, slideMax, fieldMin, > fieldMax, rangeMin, rangeMax) > { > var self = this; > self.container = $(slideContainer); > self.handleMin = $(slideMin); > self.handleMax = $(slideMax); > > self.notches = 10; > self.spacing = Math.round (self.container.width () / self.notches); > > console.log (self.minLeft = parseInt (self.handleMin.css > ('left'), > 10)); > console.log (self.maxLeft = parseInt (self.handleMax.css > ('left'), > 10)); > > var leftDraggable = self.handleMin.Draggable ({ > containment : 'parent', > grid : self.spacing, > onDrag : function (newX) > { > if (newX >= self.maxLeft) > { > console.log ('Left too far'); > $('#dragHelper').css ('left', self.maxLeft - > self.grid); > } > }, > onChange : function () > { > self.minLeft = parseInt (self.handleMin.css > ('left'), 10); > } > }); > var rightDraggable = self.handleMax.Draggable ({ > containment : 'parent', > grid : self.spacing, > onDrag : function (newX) > { > if (newX <= self.minLeft) > { > console.log ('Right too far'); > $('#dragHelper').css ('left', self.minLeft + > self.grid); > } > }, > onChange : function () > { > self.maxLeft = parseInt (self.handleMax.css > ('left'), 10); > } > }); > > } > > var test; > $(document).ready (function () > { > test = new RangeSlider ('#slider1', '#left', '#right', 0, 0, 0, > 0);}); > > </script> > <body> > </body> > <div class="slider" id="slider1"> > <div class="slideHandle leftHandle" id="left"> </div> > <div class="slideHandle rightHandle" id="right"> </div> > </div> > </html> > > At the moment I'm trying to implement code that wil restrict the > handle being dragged from sliding past the other one. What I have > written does successfully detect when one handle is overlapping or > passing the other, but the code to reposition the drag helper to an > acceptible location doesn't seem to work. > > Does anyone know what I'm doing wrong here?
