Source: https://primereact.org/knob/

Introducing PrimeReact v11 Alpha 🥁Learn More

• SearchK

• 10.9.7

  • v11(11.0.0)

  • v10(10.9.7)

  • v9(9.6.3)

• FEATURES

• API

• THEMING

• PASS THROUGH

Knob

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

Import#

---

import { Knob } from 'primereact/knob';
         

Copy

Basic#

---

Knob is used as a controlled input with value and onChange properties.

0

<Knob value={value} onChange={(e) => setValue(e.value)} />
         

Copy

Min/Max#

---

Boundaries are configured with the min and max properties whose defaults are 0 and 100 respectively.

10

<Knob value={value} onChange={(e) => setValue(e.value)} min={-50} max={50} />
         

Copy

Step#

---

Size of each movement is defined with the step property.

10

<Knob value={value} step={10} onChange={(e) => setValue(e.value)} />
         

Copy

Template#

---

Label is a string template that can be customized with the valueTemplate property having 60 as the placeholder .

60%

<Knob value={value} onChange={(e) => setValue(e.value)} valueTemplate={'{value}%'} />
         

Copy

Stroke#

---

The border size is specified with the stroke property as a number in pixels.

40

<Knob value={value} onChange={(e) => setValue(e.value)} strokeWidth={5} />
         

Copy

Size#

---

Diameter of the knob is defined in pixels using the size property.

60

<Knob value={value} onChange={(e) => setValue(e.value)} size={200} />
         

Copy

Color#

---

Colors are customized with the textColor, rangeColor and valueColor properties.

75

<Knob value={value} onChange={(e) => setValue(e.value)} valueColor="#708090" rangeColor="#48d1cc" />
         

Copy

Reactive#

---

Knob can be controlled with custom controls as well.

0

<Knob value={value} size={150} />
<Button icon="pi pi-plus" onClick={() => setValue(value + 1)} disabled={value === 100} />
<Button icon="pi pi-minus" onClick={() => setValue(value - 1)} disabled={value === 0} />
         

Copy

ReadOnly#

---

When readOnly present, value cannot be edited.

50

<Knob value={50} readOnly />
         

Copy

Disabled#

---

When disabled is present, a visual hint is applied to indicate that the Knob cannot be interacted with.

50

<Knob value={50} disabled />
         

Copy

Accessibility#

---

Screen Reader

Knob element component uses slider role in addition to the aria-valuemin, aria-valuemax and aria-valuenow attributes. Value to describe the component can be defined using_aria-labelledby_ and aria-label props.

<label htmlFor="firstname">Firstname</label>
<InputText id="firstname" />

<span id="lastname">Lastname</span>
<InputText aria-labelledby="lastname" />

<InputText aria-label="Age"/>
     

Copy

Keyboard Support

| Key | Function | | --- | --- | | tab | Moves focus to the slider. | | left arrow__down arrow | Decrements the value. | | right arrow__up arrow | Increments the value. | | home | Set the minimum value. | | end | Set the maximum value. | | page up | Increments the value by 10 steps. | | page down | Decrements the value by 10 steps. |

• Import

• Basic

• Min/Max

• Step

• Template

• Stroke

• Size

• Color

• Reactive

• ReadOnly

• Disabled

• Accessibility

PrimeReact 10.9.7 by PrimeTek