jquery ui 滑块奇怪的行为，滑动值高于最小值和低于最大值答案

【问题标题】：jquery ui slider weird behavior, slide values goes above minimum and under maximumjquery ui 滑块奇怪的行为，滑动值高于最小值和低于最大值
【发布时间】：2015-07-11 16:27:12
【问题描述】：

我正在使用 jquery ui 滑块并使其更小。当我将它滑到最小值时，它的值高于min 值，当我将它滑到最大值时，它的值低于max 值。

所以情况是这样的：

最小滑动量：值先是0，然后是1。
最大滑动量： 值依次为 500 和 499

是什么导致了这种奇怪的行为以及如何解决？

--- 编辑： ---

如果我像下面这样使用 slide 事件类型绑定，就会发生这种情况：

$(".slider").on("slide", function(){
   var value = $(this).slider("value");
   $(this).closest(".item-wrapper").find(".input-text").val(value);
});

这是一个错误吗？

--- 编辑结束 ---

这是我的代码：

CSS：

.sliderwrapper {
  float: right;
  width: 125px;
  margin: 10px 0 0 0; 
}

#sliderwrap {
  margin: 15px 0 0 0; 
}

.ui-slider-horizontal {
    height: 6px;
    background: none repeat scroll 0 0 #000000;
    border: 1px solid #000000;
}

.ui-slider .ui-slider-handle {
    height: 10px;
    width: 10px;
    background: #f26522;
    border: 1px solid #000000;
    top: -3.5px;
    cursor: pointer;
}

.ui-slider-horizontal .ui-slider-handle {
  margin-left: -2.5px;
}

HTML

<div id="sliderwrap" class="sliderwrapper">
  <div class="slider"></div>
</div>

jQuery

$(".slider").slider({
  value: val,
  min: 0,
  max: 500,
  step: 1
});

【问题讨论】：

您在此处的代码似乎对我有用。如果您在显示滑块值时执行任何其他逻辑，则应将其包含在您的问题中。这是一个demo，使用您的代码和一个额外的步骤来显示滑块值。如果你没有做额外的逻辑，那可能是你正在使用的 JQuery UI 版本中的一个错误
看来是slide事件类型绑定造成的。

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

【解决方案1】：

问题是slide 事件仅在handle 实际滑动时触发，并且在某个时间间隔内，因此很难确定。因此，特别是当您的范围很高且滑块很小时，它将在 handle 停止之前的某个值上触发，一旦停止，该事件将不再触发。要解决此问题，您可以在 stop 上添加相同的功能。像这样：

$(".slider").slider({
    value: 20,
    min: 0,
    max: 500,
    step: 1,
    slide: function (e, ui) {
        var value = $(this).slider("value");
        $(".input-text").val(value);
    },
    stop: function (e, ui) {
        var value = $(this).slider("value");
        $(".input-text").val(value);
    }
});

https://jsfiddle.net/kj0gsdL4/1/

【讨论】：