Optional fine control of step for sliders

For Counter, Slider and RangeSlider, dragging with the mouse or pressing the arrow keys increase/decrease "the control's value by the current step".

Is it possible to have fine control, with step 1, when a key is held, e.g. Ctrl, both for dragging and pressing arrow keys?

Various applications use this convention for fine movement, e.g. to move objects without snapping to a grid when Ctrl is pressed in drawing applications.

Tagged:

Comments

  • edited October 8

    Hello @dandv,

    Is it possible to have fine control, with step 1, when a key is held, e.g. Ctrl, both for dragging and pressing arrow keys?

    Not as a built-in method, no, but it is possible to achieve something similar to the wanted result, I believe. It is possible to dynamically redefine the current step of the slider. You can simply change the step value to 1 when either of the modifier keys are pressed (keydown event) and revert the value back on the keyup event: https://snippet.webix.com/aipvx3vd.

  • edited October 9

    That works great, thank you!

    I noted the difference in key detection in the keyup handler (e.which) vs. the keydown one (e.ctrlKey). I think it's better logic to check e.ctrlKey/altKey/shiftKey in keyup as well, because that would handle correctly the (corner) case of the user pressing Ctrl+Shift+Up, then releasing only Shift but continuing with Ctrl+Up.

    Here's an adaptation of the snippet to handle fine control with Shift/Ctrl/Alt for all sliders in a layout, and also including the modification above:


    webix.event(rootNode.getNode(), 'keyup', function(e) { if (!(e.ctrlKey || e.altKey || e.shiftKey)) for (const s of rootNode.queryView('slider', 'all')) s.define({ step }); });
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

In this Discussion