Demo of rotating an element to make a “dial” or “knob” ui element

Here’s a little bit of code that shows how to create a “dial” knob that you can control with the mouse. It’s entirely in HTML, CSS and Javascript.

It’s not hard, but there are a lot of little details to make it look reasonable and not completely goofy. I think it moves a little weird – and it should respond to both x and y axes, but doesn’t.

The sum of two sines, with an offset.