noUiSlider: 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.

About this issue

Original URL
State: closed
Created 11 years ago
Comments: 42 (17 by maintainers)

Commits related to this issue

Semi-fixed positioning of handle Bug #123 Some changes to make the handle position correctly in the slider. Bugs: Doesn't position correctly with 2 handles. Probably the **start** option is n... — committed to felixjet/noUiSlider by felixjet 11 years ago

Most upvoted comments

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 on Nov 19, 2013

@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.

Example

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 👍

felixjet on Oct 20, 2013

This isn’t a bug 😃 The slider design places the center of the handles at the proper position. If you want to make the handles fit within the bar, you can set a 20px padding on the .noUi-target element, and apply a border and background there.

There is no way for the slider to know the handle size, and it may even change at runtime by transitions or animations.

Thanks for your input! Maybe you’ve seen it already, but if you are interrested in learning more about Git/GitHub, you could have a look at the GitHub for Windows tool.

leongersen on Oct 20, 2013