jQuery UI 滑块句柄超出范围答案

【问题标题】：jQuery UI slider handle going out of boundsjQuery UI 滑块句柄超出范围
【发布时间】：2011-12-12 03:02:14
【问题描述】：

我已经能够完美地设计它，但让它留在它的容器中一直是一个挑战。左边距修复似乎对我不起作用。

这是一个 jsfiddle：http://jsfiddle.net/Erugp/

【问题讨论】：

您应该改用 JQUI 类。但是更改布局非常棘手，因为小部件不考虑 CSS :(
jsfiddle.net/Erugp/29 同样的事情。
jsfiddle.net/Erugp/31 很难将其居中，并且仍将其放在容器内：/

标签： jquery css jquery-ui jquery-ui-slider

【解决方案1】：

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

稍微摆弄一下 css 大小和边距后，它对我有用。

【讨论】：

我唯一注意到的是，如果您单击滑块的最右侧，它不会自动滑过。这是因为您单击的是包装器，而不是滑块 div。但这可能影响不大，您仍然可以滑到那一侧。
在 Mihai 所说的基础上，我在包装 div 的左侧添加了填充，并将手柄移到了中心。

【解决方案2】：

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

【讨论】：

这肯定效果更好，而且修复非常简单！一切都很简单。

【解决方案3】：

使用 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/

【讨论】：

这使得滑块有点跳动，它不会线性跟随鼠标。