Knob

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

Import#


import { Knob } from 'primereact/knob';

Basic#

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


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

Min/Max#

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


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

Step#

Size of each movement is defined with the step property.


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

Template#

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


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

Stroke#

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


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

Size#

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


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

Color#

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


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

Reactive#

Knob can be controlled with custom controls as well.


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

ReadOnly#

When readOnly present, value cannot be edited.


<Knob value={50} readOnly />

Disabled#

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


<Knob value={50} disabled />

Form#

Compatibility with popular React form libraries.

Formik#

Formik is a popular library for handling forms in React.


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

Hook Form#


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

Style#

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

Name	Element
p-knob	Container element.
p-knob-range	Range element.
p-knob-value	Value element.
p-knob-text	Text element.

Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

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

Key	Function
tab	Moves focus to the slider.
left arrowdown arrow	Decrements the value.
right arrowup 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.