Question

我已经能够完美地设计它，但让它保持在它的容器内一直是一个挑战。保证金左边的修复似乎不适合我。

Answer 1

解决方法是：您不需要包装任何东西，只需将手柄的左边距设置为其宽度的1/2的负值。如：http://bugs.jqueryui.com/ticket/3893

中所述

Answer 2

使用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')));

这是你的小提琴：http://jsfiddle.net/he04hqg3/

Answer 3

问题是jquery UI滑块使用左侧CSS属性和相对值来为滑块设置动画。这意味着它会将手柄的左边缘从滑块的左边缘一直滑到另一边的边缘，溢出。一种解决方案是使滑块div更小并用另一个保持造型的div包裹它。外部div宽度=滑块宽度+手柄div。

稍微摆弄css尺寸和边距后，它对我有用。

jQuery UI滑块手柄越界

3 个答案: