Rotary knob (input element)

[esride-nik]

Check existing issues

• [X] I have checked for existing issues to avoid duplicates

Description

I'd like a rotary knob input element that acts pretty much like a slider.

Why? They're less space-consuming in the layout. They'd come in handy in case you have to bring in a lot of values that can be changed by the user.

Inspiration:

• A mixer console: Mechanical sliders are used for the one "big value" per channel (volume), but there are rotary knobs for all the fiddly parts like gain, f/x loops and stuff.
• A digital version of it is often to be found on DAW UIs, like Ableton Live.

Acceptance Criteria

Mandatory:

• min / max values (number range) can be defined
• current value property (set / get)
• setting the property via mouse/touch: klick on knob and hold while dragging up or down makes the knob turn and the value change (up=right, down=left)

Optional:

• label / input box to display and type in the current value -more props inspired by the existing slider, like ticks, label-ticks, step etc.

Optional but super fancy and standing out from the slider:

Give the rotary knob an outer ring to display the current value within the range. Then give the knob a factor, that defines how many time it has to be fully turned to cover the full number range. For example, look at the image below: The black knob in the center would have to be turned like 3 times to bring the value from min to max, while the left end of the cyan outer ring is always min and the right end is always max. This gives the user the ability to enter super fine-grained values by turning the knob.

Relevant Info

No response

Which Component

New rotary knob component

Example Use Case

• It would be perfect as an exchange for the zoom level and tilt controls in the upper right corner of this demo: https://codepen.io/esride-Nik/pen/gOZgLdo. As the knobs would work in both ways, just imagine having knobs for all camera props and seeing them turn when navigating in the scene.
• see "inspiration" above

Priority impact

p3 - want for upcoming milestone

Calcite package

• [X] @esri/calcite-components
• [X] @esri/calcite-components-react

Esri team

Professional Services - Services Delivery

[github-actions[bot]]

cc @ashetland, @SkyeSeitz, @brittneytewks

[DitwanP]

Knobs as sliders have been reported as confusing to use. The interaction isn't intuitive, especially with mouse or touch input. Questions arise such as which axis affects the value and whether a circular motion is required. NNGroup has a good writeup on this topic, highlighting the ambiguity of traditional knobs. In most cases, vertical or horizontal sliders can achieve the same results in a simpler and more understandable way.

Additionally, we haven't seen significant demand for a component like this, so for that reason, we won't be adding this component at this time.