Knob

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


import { Knob } from 'primereact/knob';
         

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

0

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

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

Size of each movement is defined with the step property.

40

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

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}%'} />
         

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

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

60

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

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

75

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

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

When readOnly present, value cannot be edited.

50

<Knob value={50} readOnly />
         

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

50

<Knob value={50} disabled />
         

Compatibility with popular React form libraries.

Formik is a popular library for handling forms in React.

0
 

<Toast ref={toast} />
<Knob id="item" name="item" value={formik.values.item} onChange={(e) => { formik.setFieldValue('item', e.value) }} />
<Button type="submit" label="Submit" className="mt-2" />
         

0
 

<Toast ref={toast} />
<Controller
    name="value"
    control={control}
    rules={{ required: 'The value must be greater than zero.' }}
    render={({ field }) => (
        <CascadeSelect id={field.name} name="value" value={field.value} options={countries} optionLabel={'cname'} optionGroupLabel={'name'}
         optionGroupChildren={['states', 'cities']} style={{ minWidth: '14rem' }} placeholder={'Select a City'}
         onChange={(e) => field.onChange(e.value)}/>)}
    />
<Button type="submit" label="Submit" className="mt-2" />
         

Following is the list of structural style classes, for theming classes visit theming page.

NameElement
p-knobContainer element.
p-knob-rangeRange element.
p-knob-valueValue element.
p-knob-textText element.
Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

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 usingaria-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"/>
     

Keyboard Support

KeyFunction
tabMoves focus to the slider.
left arrowdown arrowDecrements the value.
right arrowup arrowIncrements the value.
homeSet the minimum value.
endSet the maximum value.
page upIncrements the value by 10 steps.
page downDecrements the value by 10 steps.