Knob

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

Usage#

import { Knob } from 'primereact/knob';
<Knob>
    <Knob.Range />
    <Knob.Value />
    <Knob.Text />
</Knob>

Examples#

Basic#

50
import { Knob } from 'primereact/knob';
 
export default function BasicDemo() {
    return (
        <div className="card flex justify-center">
            <Knob defaultValue={50}>
                <Knob.Range />
                <Knob.Value />
                <Knob.Text />
            </Knob>
        </div>
    );
}

Min/Max#

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

10
import { Knob } from 'primereact/knob';
 
export default function MinMaxDemo() {
    return (
        <div className="card flex justify-center">
            <Knob defaultValue={10} min={-50} max={50}>
                <Knob.Range />
                <Knob.Value />
                <Knob.Text />
            </Knob>
        </div>
    );
}

Step#

Step factor is 1 by default and can be customized with step option.

50
import { Knob } from 'primereact/knob';
 
export default function StepDemo() {
    return (
        <div className="card flex justify-center">
            <Knob defaultValue={50} step={10}>
                <Knob.Range />
                <Knob.Value />
                <Knob.Text />
            </Knob>
        </div>
    );
}

Template#

50%
import { KnobTextInstance } from '@primereact/types/shared/knob';
import { Knob } from 'primereact/knob';
 
export default function TemplateDemo() {
    return (
        <div className="card flex justify-center">
            <Knob defaultValue={50}>
                <Knob.Range />
                <Knob.Value />
                <Knob.Text>
                    {(instance: KnobTextInstance) => {
                        const { knob } = instance;
 
                        return <>{knob?.state.value}%</>;
                    }}
                </Knob.Text>
            </Knob>
        </div>
    );
}

Stroke#

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

40
import { Knob } from 'primereact/knob';
 
export default function StrokeDemo() {
    return (
        <div className="card flex justify-center">
            <Knob defaultValue={40}>
                <Knob.Range strokeWidth={5} />
                <Knob.Value strokeWidth={5} />
                <Knob.Text />
            </Knob>
        </div>
    );
}

Size#

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

60
import { Knob } from 'primereact/knob';
 
export default function BasicDemo() {
    return (
        <div className="card flex justify-center">
            <Knob defaultValue={60} size={200}>
                <Knob.Range />
                <Knob.Value />
                <Knob.Text />
            </Knob>
        </div>
    );
}

Color#

Each of the three components (Knob.Range, Knob.Value, Knob.Text) accepts a color prop to customize their appearance. In addition, strokeWidth is used to determine the width of the stroke of range and value sections.

50
import { Knob } from 'primereact/knob';
 
export default function ColorDemo() {
    return (
        <div className="card flex justify-center">
            <Knob defaultValue={50}>
                <Knob.Range color="MediumTurquoise" />
                <Knob.Value color="PeachPuff" />
                <Knob.Text />
            </Knob>
        </div>
    );
}

Reactive#

Knob can be controlled with custom controls as well.

0
import { Button } from 'primereact/button';
import { Knob } from 'primereact/knob';
import * as React from 'react';
 
export default function ReactiveDemo() {
    const [value, setValue] = React.useState(0);
 
    return (
        <div className="card flex flex-col items-center gap-2">
            <Knob value={value} size={150} readOnly>
                <Knob.Range />
                <Knob.Value />
                <Knob.Text />
            </Knob>
            <div className="flex gap-2">
                <Button onClick={() => setValue(value + 1)} disabled={value === 100}>
                    <i className="pi pi-plus" />
                </Button>
                <Button onClick={() => setValue(value - 1)} disabled={value <= 0}>
                    <i className="pi pi-minus" />
                </Button>
            </div>
        </div>
    );
}

ReadOnly#

When readOnly is present, value cannot be edited.

50
import { Knob } from 'primereact/knob';
 
export default function ReadOnlyDemo() {
    return (
        <div className="card flex justify-center">
            <Knob defaultValue={50} readOnly>
                <Knob.Range />
                <Knob.Value />
                <Knob.Text />
            </Knob>
        </div>
    );
}

Disabled#

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

50
import { Knob } from 'primereact/knob';
 
export default function DisabledDemo() {
    return (
        <div className="card flex justify-center">
            <Knob defaultValue={50} disabled>
                <Knob.Range />
                <Knob.Value />
                <Knob.Text />
            </Knob>
        </div>
    );
}

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.

Keyboard Support#

KeyFunction
tabMoves focus to the knob.
left/down arrowDecrements the value.
right/up 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.
PrimeReact 11.0.0-alpha.5 on React by PrimeTek