In time ranges, right side is 15 minutes too far right.

[DarrenCook]

See http://jsfiddle.net/vM844/672/

The left label shows 09:00:00 and also lines up with an hour line. But the right label lines up with an hour line when it says 45m past the hour. E.g. 12:45:00 is pointing to 13:00:00.

Making the smallest range, 09:00:00 to 09:15:00, it seems to show a 30 minute range. When extended to 09:00:00 to 09:30:00, it is showing a 45 minute range (well, just over, but I'm making some allowance for the fuzzy border). And when I extend to 09:00:00 to 09:45:00, the 10am white line is now covered.

The bug shows equally in Firefox and Chrome. Whether I make the browser full-screen width, or narrower, the problem is fairly much the same. Removing step/range settings makes no difference.

[DarrenCook]

Issue #124 might be the same bug?

[DarrenCook]

I tried to find the problem in the source code today, but no luck yet. However I think the problem is more widespread: it affects all rulers, and all slider handles.

First, I modified the iThing.css so things are easier to see: changed to a translucent red, and removed the rounded corners and box shadow:

.ui-rangeSlider-bar{
    background: RGBA(255,128,128,0.6);
  height: 29px;
  margin:1px 0;
  /*-moz-border-radius: 4px;
  border-radius: 4px;*/
  cursor:move;
    cursor:grab;
    cursor: -moz-grab;
  /*
    -webkit-box-shadow: inset 0 2px 6px RGBA(0,0,0,0.5);
     -moz-box-shadow: inset 0 2px 6px RGBA(0,0,0,0.5);
          box-shadow: inset 0 2px 6px RGBA(0,0,0,0.5);
*/
}

Note: these CSS changes don't affect the problem at all, they just make it easier to see.

Here are two screenshots from http://ghusse.github.io/jQRangeSlider/documentation.html

The left handle is 4px too far right, and the right handle is 4px too far left. (This 4px seems constant at all screen widths, so is not related to a scaling factor.) E.g. if, in Firebug, if I change (<div class="ui-rangeSlider-label ui-rangeSlider-rightLabel"...>) from "right:322px;" to "right:326px;" then the right handle lines up with the ruler. Ditto for changing the left handle (<div class="ui-rangeSlider-label ui-rangeSlider-leftLabel"...>) from "right:514px" to right:518px". The bar itself is 8px too wide. E.g. if I change <div class="ui-rangeSlider-bar" style="position: absolute; top: 0px; width: 202px; left: 128px;"></div> to be width:194px then it lines up perfectly. (NB. the left: value of the bar is always correct - well, assuming the ruler is correct!)

[DarrenCook]

Here is a nieve fix (for the example in the original jsfiddle).

1. in JQRangeSliderBar.js: (add a +4 and a -4)

        _leftHandle: function(){
            return this._handleProxy(this.options.leftHandle, arguments)+4;
        },

        _rightHandle: function(){
            return this._handleProxy(this.options.rightHandle, arguments)-4;
        },

1. In jQRangeSliderHandle.js: (add one -4)

        _getPositionForValue: function(value){
            if (!this.cache || !this.cache.parent || this.cache.parent.offset === null){
                return 0;
            }

            value = this._constraintValue(value);

            var ratio = (value - this.options.bounds.min) / (this.options.bounds.max - this.options.bounds.min),
                availableWidth = this.cache.parent.width - this.cache.width.outer,
                parentPosition = this.cache.parent.offset.left;

            return (ratio * availableWidth + parentPosition)-4;
        },

This fixes the initial view. Yay! BUT, if I resize the window, especially making it narrower, or move the sliders around, then it all goes horribly wrong (the 09:00 to 13:00 values end up getting changed!!). I think I must be misunderstanding how the slider is working.

[ghusse]

Thanks for your work on this issue.

If you want it to work correctly, you'll have to do 2 things: 1) change the method _getRawValueForPositionAndBounds in jQRangeSliderHandle.js 2) Modify your code to remove hard coded values

You should also remove your modifications described in the first point. Because the call does not returns a position.

[DarrenCook]

Thanks for the hint. I had a play around, but cannot work out what to change to get it to work! Sorry.

[ghusse]

Duplicate of #132

[DarrenCook]

Thanks! I've confirmed Version 5.5.0 fixes the width of the slider bar. :-)

However the left and right label are still off (left needs to move 4px to the left, right needs to move 4px to the right). This is on at least Firefox 20, Chrome 25 and Opera 12. And, as mentioned before, the issue can be seen in this documentation sample: http://ghusse.github.io/jQRangeSlider/documentation.html#scalesOption

Curiously, the 4px fix seems about right whether the slider is 300px wide or 1500px wide. I.e. it appears to be a constant off-by-4px error, rather than a scaling constant.

(And, again, sorry I'm lost about where to fix this.)

[ghusse]

Can you open another bug for this one?

Thanks