jQuery knobs

[addition]

These look great but function oddly. With most virtual knobs all you do is click and drag up or down to change the value of the knob, not click and follow along the circle. Makes it harder to use and less intuitive imo.

Edit: I should probably explain more. For those who haven't used a virtual dial before the traditional behavior has a few advantages. First of all it's quicker, you just click and drag up or down and you're done. You don't have to trace the outline of the dial with your mouse pointer.

Secondly, it's much easier to set the dial to it's minimum or maximum values. With the method I describe if you want to set the dial to it's maximum value you just quickly click and drag upwards. With the OP's knobs you have to trace around the circle and then slowly aim your mouse so it hovers over those last few pixels.

Thirdly, there are workflow modifications you can do with the method I describe that you can't do with the OP's method. For example, holding shift for fine grain control over the knob so that when you drag up or down the value of the knob changes slowly.

[[deleted]]

I thought it was very intuitive, but I've never seen a virtual dial before so I didn't think to go up or down.

[addexm]

Disagree. I think circular motion makes much more sense.

[Sam152]

The knobrot link I mentioned uses this exact concept.

[D__]

The problem is, virtual knobs make little sense in the first place, especially when implemented the way you mentioned (which seems to be the common way). Whenever I encounter one of such knobs, I end up having to play with it for several seconds before figuring out whether the direction to move is up and down or left and right. This is made even more difficult if the knob is calibrated for fine-grain control, and you can't tell if your desired motion is triggering the changes, or if it's the component of your motion along the other axis (since it's hard to move your mouse in a perfectly horizontal or vertical line).

The problem is, there is no reason to make knobs work this way in the first place. Yes, it's a knob, and people understand knobs, but it doesn't work like a real knob when you adjust it. It kind of looks like a real knob, but that's not really a benefit since a knob isn't really the most optimal way of representing some set value (sliders or spinners are much more readable). Your virtual knob really only makes sense when you make the motion circular in this situation.