Category: Web

jquery.knobby.js is a jQuery-plugin for creating turning knobs Witz javascript. Die Knöpfe sind für Eingaben mit Maus und Tastatur aber auch für Touch-Devices geeignet.

Calling $("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.

Features

Some HTML attributes are supported:
min, max, step and turn. The attributes min and 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.

With the 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 size attribute.
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).