Gordon, I just wish u finish this widget in style... I also have similar problems with interface slider and wasn't able to get around it... Interface slider also has problems when executing callbacks. For example, when the handle is dragged and dropped, the onChange fires, but not when you click somewhere on the slider bar that moves the handle... That was pretty annoying, coz, onChange events wont work fine in my cases... I sincerely wish u get it right...
Lemme know if you want my help testing it... I will give my best shot to break them if u need me to. Also, remember, there is a jquery UI project taht is going to implement a slider... But, i am not sure when it is due. Either ways, i think u r in the right direction... Also, can u post ur example somewhere where i can take a look... -GTG On 8/15/07, Gordon <[EMAIL PROTECTED]> wrote: > > > I realised in the end it's not really a problem because dragging the > sliders trigger a resizing of the divs used to define the domain so > the handles still remain grabbable when that part of the object is > implemented. > > <!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(ui/configurator/range_chart.gif) no-repeat top; > } > .slifer .domain { > position: absolute; > height: 100%; > } > .slider .domain { > position: absolute; > top: 0; > width: 152px; > height: 100%; > /*opacity: 0.3;*/ > /*filter: alpha (opacity=30);*/ > } > .slider .domain.left { > /*background: yellow;*/ > left: 0px; > } > .slider .domain.right { > /*background: cyan;*/ > right: 0px; > } > .slideHandle { > width: 19px; > height: 58px; > position: absolute; > font-size: 0; > line-height: 0; > overflow: hidden; > border: none; > top: 0px; > } > .leftHandle { > background: url(ui/configurator/range_handle_left.gif) no-repeat > bottom; > } > .rightHandle { > left: 133px; > background: url(ui/configurator/range_handle_right.gif) no-repeat > bottom; > } > > </style> > <script type="text/javascript"> > > function RangeSlider (slideElem, slideMin, slideMax, fieldMin, > fieldMax, rangeMin, rangeMax, step) > { > var self = this; > // DOM elements > self.container = $(slideElem); > self.domainLeft = $('.left', self.container); > self.domainRight = $('.right', self.container); > self.handleMin = $(slideMin); > self.handleMax = $(slideMax); > > // Widths > self.sliderWidth = self.container.width (); > self.handleWidth = self.handleMin.width (); > self.dmnLeftWidth = self.domainLeft.width (); > self.dmnRightWidth = self.domainRight.width (); > > self.dmnLeftSize = function () > // resize left domain > { > // Calculate left domain width > var newWidth = self.sliderWidth > - self.dmnRightWidth > + parseInt ( > self.handleMax.css ('left')); > // Resize the left hand domain > self.domainLeft.width (self.dmnLeftWidth = > newWidth); > }; > self.dmnRightSize = function () > // Resize right domain > { > // Calsulate right domain width and handle offset > var newWidth = self.sliderWidth > - self.handleWidth > - parseInt ( > self.handleMin.css ('left'), 10); > var widthChange = self.dmnRightWidth - newWidth; > // Resize the right hand domain > self.domainRight.width (self.dmnRightWidth = > newWidth); > // Reposition the right drag handle to maintain its > relative > position > self.handleMax.css ('left', parseInt > (self.handleMax.css('left'), > 10) - widthChange); > }; > self.initHandle = function (handle) > // Initialize a handle > { > handle.Draggable ( > { > containment : 'parent', > grid : step, > onChange : function () > { > switch (this.id) > { > case self.handleMin [0].id : > self.dmnRightSize (); > break; > case self.handleMax [0].id : > self.dmnLeftSize (); > break; > } > } > }); > }; > > self.initHandle (self.handleMin); > self.initHandle (self.handleMax); > } > > var test; > > $(document).ready (function () > { > test1 = new RangeSlider ('#slider1', '#left1', '#right1', 0, 0, > 0, 0, > 0); > test2 = new RangeSlider ('#slider2', '#left2', '#right2', 0, 0, > 0, 0, > 17); > test3 = new RangeSlider ('#slider3', '#left3', '#right3', 0, 0, > 0, 0, > 0); > test4 = new RangeSlider ('#slider4', '#left4', '#right4', 0, 0, > 0, 0, > 17); > test5 = new RangeSlider ('#slider5', '#left5', '#right5', 0, 0, > 0, 0, > 0); > }); > > </script> > <body> > </body> > <div class="slider" id="slider1"> > <div class="domain left" id="leftDomain1"> > <div class="slideHandle leftHandle" id="left1"> </div> > </div> > <div class="domain right" id="rightDomain1"> > <div class="slideHandle rightHandle" id="right1"> </div> > </div> > </div> > <div class="slider" id="slider2"> > <div class="domain left" id="leftDomain2"> > <div class="slideHandle leftHandle" id="left2"> </div> > </div> > <div class="domain right" id="rightDomain2"> > <div class="slideHandle rightHandle" id="right2"> </div> > </div> > </div> > <div class="slider" id="slider3"> > <div class="domain left" id="leftDomain3"> > <div class="slideHandle leftHandle" id="left3"> </div> > </div> > <div class="domain right" id="rightDomain3"> > <div class="slideHandle rightHandle" id="right3"> </div> > </div> > </div> > <div class="slider" id="slider4"> > <div class="domain left" id="leftDomain4"> > <div class="slideHandle leftHandle" id="left4"> </div> > </div> > <div class="domain right" id="rightDomain4"> > <div class="slideHandle rightHandle" id="right4"> </div> > </div> > </div> > <div class="slider" id="slider5"> > <div class="domain left" id="leftDomain5"> > <div class="slideHandle leftHandle" id="left5"> </div> > </div> > <div class="domain right" id="rightDomain5"> > <div class="slideHandle rightHandle" id="right5"> </div> > </div> > </div> > </html> > > > On Aug 15, 2:10 pm, Gordon <[EMAIL PROTECTED]> wrote: > > 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? > >
