jQuery UI slider handle going out of bounds

Question

I've been able to style it flawlessly but getting it to stay within it's container has been a challenge. The margin-left fix doesn't seem to work for me.

Here's a jsfiddle: http://jsfiddle.net/Erugp/

You should use the JQUI classes instead.. But its pretty tricky to change the layout, since the widget dosent take the CSS into account :( — Marco Johannesen, Oct 20 '11 at 21:09
http://jsfiddle.net/Erugp/31/ well its pretty hard to center it, and still have it inside the container :/ — Marco Johannesen, Oct 20 '11 at 21:31

score 9 · Answer 1 · answered Oct 03 '13 at 14:46

9

The solution to this is: You do not need to wrap anything, just set the left-margin of the handle to the negative value of 1/2 of its width. As described in: http://bugs.jqueryui.com/ticket/3893

answered Oct 03 '13 at 14:46

Khalid D.

99
1
2

1

This definitely worked better and a very simple fix! It's all in the simplicity. – Arnaldo Capo Oct 29 '13 at 16:24

score 3 · Answer 2 · answered Oct 19 '14 at 14:09

Fix it using javascript:

var $Slide = jQuery('#StatusSlide');
$Slide.slider({
  slide: function(event, ui) {
    /* Fix handler to be inside of slider borders */
    var $Handle = $Slide.find('.ui-slider-handle');
    $Handle.css('margin-left', -1 * $Handle.width() * ($Slide.slider('value') / $Slide.slider('option', 'max')));
  }
});
/* Fix handler to be inside of slider borders */
var $Handle = $Slide.find('.ui-slider-handle');
$Handle.css('margin-left', -1 * $Handle.width() * ($Slide.slider('value') / $Slide.slider('option', 'max')));

And here is your fiddle fixed: http://jsfiddle.net/he04hqg3/

This makes the slider kind of jumpy and it doesn't follow the mouse linearly. — kjprice, Jan 13 '16 at 20:48

score 3 · Accepted Answer · answered Dec 18 '11 at 11:28

3

The issue is that jquery UI slider uses the left CSS property with relative values to animate the slider. This means that it will slide the left edge of the handle from the left edge of the slider all the way to the other side's edge, overflowing. One solution is to make the slider div smaller and wrap it with another div which holds the styling. The outer div width = slider width + handle div.

After a little fiddling with the css sizes and margins it worked for me.

answered Dec 18 '11 at 11:28

Mihai Oprea

2,051
3
21
39

The only thing that I noticed is that if you click on the rightmost side of the slider, it won't slide over automatically. This is because you are clicking on the wrapper, not on the slider div. But it might not be that much of an impact, you can still slide over to that side. – Mihai Oprea Dec 18 '11 at 11:30
On top of what Mihai said, I added padding left to the wrapping div and that moved the handle to the center. – user1786317 Dec 13 '12 at 22:27

jQuery UI slider handle going out of bounds

3 Answers3