Ползунок jquery изменяет значение шага в зависимости от используемого периферийного устройства управления

Question

Код, чтобы вы могли видеть, с чем я работаю.

$("#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

Возможно ли это, было ли это сделано? Я искал такую ​​функциональность ползунков, но уже пустую.

Answer 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 вариант, связывая обратный вызов с конкретными событиями.