React Knob is a form component to define number inputs with a dial.
Setup
Refer to PrimeReact setup documentation for download and installation steps for your environment.
Import
import { Knob } from 'primereact/knob';
Getting Started
Knob is used as a controlled input with value and onChange properties.
<Knob value={value} onChange={(e) => setValue(value)} />
Minimum and Maximum
Boundaries are configured with the min and max values whose defaults are 0 and 100 respectively.
<Knob value={value} min={0} max={100} onChange={(e) => setValue(value)} />
Step
Step factor is 1 by default and can be customized with step option.
<Knob value={value} step={10} onChange={(e) => setValue(value)} />
Styling
valueColor defines the value color, rangeColor defines the range background and similarly textColor configures the color of the value text. In addition, strokeWidth is used to determine the width of the stroke of range and value sections.
<Knob value={value} valueColor={"SlateGray"} rangeColor={"MediumTurquoise"} onChange={(e) => setValue(value)} />
Size
Default size of the Knob is 100 pixels for width and height, use the size property to customize it per your requirements.
<Knob value={value} size={200} onChange={(e) => setValue(value)} />
Theming
Knob supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.
Resources
Visit the PrimeReact Knob showcase for demos and documentation.