Fork me on GitHub

Presets

Knobs as switch

Knobs can be used as switches too if they are supplied with a data-labelsattribute

Scale it

As all knobs are made with SVG they scale. Use the data-size attribute to set the size of a knob

Customize

Customize the scale using min, max, data-angleOffset and data-angleRange. Where min & max defines the minimal and maximal value of the knob. data-angleOffset sets the angle (in degree) where the scale starts, default is 0. data-angleRange sets the range of the scale between 0 and 360 degree. step define the step in which the value increase.

As the knobs are build with SVG all parts can by styled with CSS.

Build your own

All knobs can be build of the following components