jquery slider alter step value based on control peripheral used

Question

Code so that you can see what im working with.

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

Okay so I know how to step increment as you can see here its a very fine step I'm using but its difficult to get to the right value due to the high range.

I also know that the slider can be used with the mouse and once activated can be moved to the next step with the keyboards arrows.

What I would like to be able to do is set a mouse step of 1. then a keyboard step of 0.01

Is this possible, has it been done? I've been looking around for this sort of functionality of sliders but am coming up empty.

score 1 · Accepted Answer · answered Jun 01 '17 at 17:01

The quick answer:

$(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);
  });
});

Working Example: https://jsfiddle.net/Twisty/xkwq87j6/

You can adjust the step option by biding a callback to specific events.

jquery slider alter step value based on control peripheral used

1 Answers1