CODEWITHSUNDEEP
jquerycssjquery-uijquery-ui-slider
Brooklyn Nicholson
Brooklyn Nicholson

Reputation: 646

jQuery UI slider handle going out of bounds

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/

Upvotes: 4

Views: 7563

Answers (3)

brubla
brubla

Reputation: 61

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/

Upvotes: 3

Khalid D.
Khalid D.

Reputation: 99

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

Upvotes: 9

Mihai Oprea
Mihai Oprea

Reputation: 2047

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.

Upvotes: 3

Related Questions