Jquery UI滑块奇怪的行为，滑块值高于最小值，低于最大值

jquery ui slider weird behavior, slide values goes above minimum and under maximum

本文关键字：高于 最小值 最大值 UI Jquery      更新时间：2023-09-26

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

所以情况是这样的:

  • 最小滑动:值先到0，再到1。
  • 最大滑动:值先到500，再到499

是什么导致了这种奇怪的行为，如何解决它?

—EDIT:—

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

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

这是一个bug吗?

—编辑结束—

下面是我的代码:

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;
}


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

$(".slider").slider({
  value: val,
  min: 0,
  max: 500,
  step: 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/

相关文章：