jquery滑块根据使用的控制外围设备改变步长值

时间:2017-06-01 16:15:00

标签: javascript jquery jquery-ui-slider jquery-slide-effects

代码,以便您可以看到我正在使用的内容。

$("#slider-markup").slider({
    orientation: "horizontal",
    range: "min",
    min: 0,
    max: 500,
    value: 0,
    step: 0.01,
    slide: function (event, ui) {
        $("#markupRate").text(ui.value);
        calcNow();
    }
});

好的,所以我知道如何逐步增加,因为你可以看到它是一个非常精细的步骤我使用但由于范围很大而很难达到正确的值。

我也知道滑块可以与鼠标一起使用,一旦激活,可以使用键盘箭头移动到下一步。

我希望能够做的是设置鼠标步骤1.然后键盘步骤为0.01

这可能吗,已经完成了吗?我一直在四处寻找滑块的这种功能,但是我的空白了。

1 个答案:

答案 0 :(得分:1)

快速回答:

$(function() {
  $("#slider-markup").slider({
    orientation: "horizontal",
    range: "min",
    min: 0,
    max: 500,
    value: 0,
    step: 0.01,
    slide: function(event, ui) {
      $("#markupRate").text(ui.value);
    }
  });
  $("#slider-markup .ui-slider-handle").mousedown(function() {
    $("#slider-markup").slider("option", "step", 1.0);
  }).mouseup(function() {
    $("#slider-markup").slider("option", "step", 0.1);
  });
});

工作示例:https://jsfiddle.net/Twisty/xkwq87j6/

您可以通过将回调设置为特定事件来调整step选项。