$("input[name='...']").knobby(); converts a HTML form input into a round knob, which allows value adjustment by rotation movements of the mouse or with your finger on touch devices.
Some HTML attributes are supported:
turn. The attributes
max define the boundaries – the value of
max should be larger than the
min value for the button to work properly.
step allows you to adjust the smallest possible step size. For example, with
step="10" values always will change in steps of tenths on the other hand
step=".5" will allow you to step in values of halfs. The default is “1” so in order to have decimal places it is required to set a step-size.
turn attribute you can define the number of total rotations. The default setting is one turn (turn=1). With a value of
turn=".5" the button only allows for half a turn whereas with a value of
turn="10" the knob rotates ten full circles.
With these two settings a wide variety of desired precisions are possible:
for smaller valuis with litte precision a lower
turn value is possible – for a broader scale with high precision requirements a higher
turn value is probably more suitable.
The size of appearance can be adjusted with the
It’s using EM values internaly. So by saying
size=5 the knob appears five times the size of a normal row of text.
An option for logarithmic scaling of values is currently in planning (so higher values lead to higher step sizes) – it should also be improved in the future to allow for multiple touches at different knobs.
You can see the demo to see the plugin in use. The complete source code is available at Github (under MIT license).