Dimmer (Prototype)

Working prototype here: https://codepen.io/raadoo/full/OJjwpKv

What is this

Interaction study using native range inputs as circular motion inputs rather than the linear default. Compatibility issues led to datalist not being used, relying instead on a series of generated divs for the notches - proper ARIA markup needed to alleviate accessibility issues.

Is it usable

Motion is smooth and predictable, sometimes a bit clunky on mobile devices, though still usable in the right context. Works with both a natural dragging motion as well as a direct click/tap to the desired level.

What's it for

Useful applications could be as part of a User Dashboard wherein they can set their own app lighting level, or as an indicator of ambient-adjusted light level in a non-user-controllable environment.