Knob

Knob is a form component to define number inputs with a dial.

Basic

Readonly

Disabled

Min/Max

Step

Template

Stroke

Size

Color

Reactive Knob

Import via Module


import { Knob } from 'primereact/knob';

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/knob/knob.min.js"></script>

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)} />

Properties

Any valid attribute is passed to the root element implicitly, extended properties are as follows;

Name	Type	Default	Description
id	string	null	Unique identifier of the element.
value	number	null	Value of the component.
size	number	100	Size of the component in pixels.
disabled	boolean	false	When present, it specifies that the component should be disabled.
readOnly	boolean	false	When present, it specifies that the component value cannot be edited.
step	number	null	Step factor to increment/decrement the value.
min	number	0	Mininum boundary value.
max	number	100	Maximum boundary value.
valueColor	string	null	Background of the value.
rangeColor	string	null	Background color of the range.
textColor	string	null	Color of the value text.
strokeWidth	number	14	Width of the knob stroke.
showValue	boolean	true	Whether the show the value inside the knob.
valueTemplate	string	{value}	Template string of the value.