Introduction

Renders a react knob component that can be widely customised.

Live Editor

<Knob
    size={100}
    angleOffset={220}
    angleRange={280}
    value={33}
    min={0}
    max={100}
>
    <Arc arcWidth={5} color="#FC5A96" background="#CCCCCC" />
    <Pointer width={5} height={40} radius={10} type="rect" color="#FC5A96" />
</Knob>

Result

The base of all knobs is the Knob component which handles all of the user interaction and calculation of the knob value. The user can interact via drag'n drop, mousewheel and keyboard. The knobs are accessible by the tab key.

The display part is splitted into the Pointer, Scale, Arc, Value and few others.

One or more of them can be children of a Knob.