1

When creating a nice slider using Mootools More 1.5.1 Slider class, I noticed that the 'knob' can be dragged too far to the right.

Consider this slider scenario:

|--|~|----------------|

I find I am able to do this:

|---------------------||~|

which is no good when the parent div has overflow:hidden set.

This occurs because the Drag object in the Slider class sets the left most x position ( limit.x[1] ) as the width of the passed in element (parent of the knob).

I would expect this limit to be the the element width minus the knob width.

I get the same problem whether the 'knob' is inside or outside the 'element' (above and below in the DOM).

The only way I could fix this was with a hack:

if(mySlider.drag.options.limit.x[1]===mySlider.element.getSize().x){
    mySlider.drag.options.limit.x[1] -= mySlider.knob.getSize().x;
    mySlider.drag.setOptions(mySlider.drag.options);
}

Check out this Fiddle (examples of broken and hacked).

Am I missing something here? Or should this be raised as a bug?

Eclectic
  • 847
  • 1
  • 11
  • 26
  • not really missing something I don't think. when you instantiate the class, it has no way of knowing your knob's dimensions as it may not be visible etc so it can't compensate until it renders it so you can read it from the DOM. if your knob was just a `==|==` then it's not an issue as such but yours isn't. the problem is if the values need to relate to exactly 300 or nnn - limiting range for visual reasons affects exported val and that's not a good thing. you'd have to actually set the rail width to 300+knob, not the other way around. – Dimitar Christoff Feb 28 '15 at 10:26
  • http://codepen.io/anon/pen/PwaevM - go native? :D – Dimitar Christoff Feb 28 '15 at 10:29
  • 1
    Except when you consider both examples in the fiddle return the same range values. The culprit is in the Slider class itself. The method `setSliderDimensions` returns the element minus knob wrapped in a measure. This works fine and sets the limit option correctly (300-30=270). Then the class calls `setSnap` which overrides this _correct_ value with element width again: `options.limit[this.axis][1] = this.element[this.offset];` where in this case `this.offset = 'offsetWidth';`. Pretty certain this is a bug ... – Eclectic Feb 28 '15 at 12:58
  • fair enough, I'd agree. https://github.com/mootools/mootools-more/issues – Dimitar Christoff Mar 01 '15 at 14:55

0 Answers0