Bug on handle positioning at 100%

Hi, my first comment on github! If im wrong about this im sorry.

In line 507-508:

// Limit 'to' to 0 - 100 to = to < 0 ? 0 : to > 100 ? 100 : to;

When the handle is moved to the max, the CSS goes something like: left: 100%; because of that conditional.

The problem is that the handle is starting at 100%, so… outside of the container.

Example: If i have a slider bar of 300px width with a handle of 20px width, i expect this:

0% = left: 0px; 50% = (sliderWidth/2 - handleWidth/2) = (300/2 - 20/2) = left: 140px; 100% = (sliderWidth - handleWidth) = (300 - 20) = left: 280px;

However, at 100% the handle is starting at 300px, placing it outside and having a total width of 320px;

I tried to fix it and upload the changes but no success.

Thanks.

[felixjet]

Can we reopen this and fix it? Its a bug because you expect people to use the default sliders but, since we have the option to use custom sliders, on some cases this bug will happen. My fix is working 100%, the only case where it doesnt work is in vertical sliders, it wouldnt be a problem anyway, but since i dont need them, i didnt waste time adding the fix to them.

But i would like to see this plugin improving !

[felixjet]

@leongersen How cant it be a bug? In a 3 step slider, it should be 0-50-100%, but the handle is not sitting at 50%, is sitting at a higher value. Because 50% would be marked at the half of the handler, not at the start.

As you see, on a 222px slider, the handler sits out of the slider.

And in the second part of the image, the handler is where it should be, 5px below the blue bar, and 5px below the green bar.

The image is not needed anyway because u got my point.

A solution… well, you say there is no way for the slider to know the handle size, but its specified on the CSS. like:

.noUi-handle { height: 10px; width: 10px; }

so you can read those values just like style = base.data('style'). dont?

Thanks! Awesome slider btw 👍