Question

我正在使用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
});

Answer 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/

jquery ui滑块奇怪的行为，幻灯片值超过最小值且低于最大值

1 个答案: