8 October 2026

JavaScript knob and dial components in 2026, compared

I make a UI library with two dials in it, a detented knob and a jog and shuttle dial, so read this knowing that. I went through about 40 knob and dial projects for the web and kept the 14 worth knowing about, plus mine, with the rest in a short list at the end. Everything here was checked on 1 October 2026 against each project's source, README, docs and npm page. I read the code; I didn't run each one in a browser or a screen reader. Download counts are npm's, for the week of 21 to 27 September. If something here is wrong, email me and I'll fix it.

What actually differs

Nearly every knob takes a step and works with touch. These are the things that don't come standard:

• How it turns. Three ways, and the table below uses these names. *Pointer angle*: the value is wherever the pointer points, so the knob jumps to where you grab it. *Angle moved*: it turns by how far you go round the centre, like a real knob. *Drag*: it ignores the circle and takes an up-and-down (or sideways) drag. Audio software treats this as a choice per control; JUCE, which a lot of audio plugins are built with, offers four turning styles.
• Keyboard and screen readers. The pattern to follow is the ARIA slider: a slider role, the value, min, max and a label, Up and Right to increase, Down and Left to decrease, Home and End for the ends. Some of the most installed knobs skip it.
• Bounded or endless. A volume knob stops at the ends. An encoder or a jog wheel turns forever.
• Detents. Almost none have them: a notch the knob sticks in before it clicks over to the next.
• Upkeep and licence. Several of the most installed knobs haven't changed in years, and one family of suites changed its licence this summer.

At a glance

The standalone knobs

• jQuery Knob (MIT). Still the most installed knob I found: about 18,500 downloads a week, and nearly as many again under a second package name. Nothing has changed since 2015. It's a canvas drawn around a text input, with no ARIA, so a screen reader meets a text box.
• react-dial-knob (MIT). About 15,000 a week, five skins and a way to draw your own. Its README now opens with "UNMAINTAINED & OLD", its peer range stops at React 17, and it gives screen readers values but no role, so they may not announce a slider at all.
• react-rotary-knob (MIT). About 3,100 a week. It turns by the angle moved, wraps round by default (clamp it if 100 shouldn't run on to 0), and waits until the pointer is 100 px from the centre before it moves, so a click doesn't make it jump. SVG skins, with an 18-skin pack. A fork for React 19 exists, but almost nobody installs it.
• react-knob-headless (MIT). The accessible React one, if you draw it yourself: a proper slider role, a label its types insist on, and log scales through a mapping function. Two catches: the keyboard comes from a hook you have to add, and it stays out of the tab order unless you turn that on.
• @slipmatio/control-knob (MIT, Vue 3). Tiny usage (about 25 a week) but complete: slider role with every value, arrows, Home and End, the wheel, Alt-click to reset. A breaking release in June improved its keyboard and ARIA support.
• webaudio-controls (Apache-2.0). Custom elements for music apps: knobs, sliders, switches and a keyboard, image-strip skins (it comes with many made in KnobMan), log scales and MIDI learn. It isn't on npm and has no version numbers; you load it with a script tag. No ARIA, only Up and Down on the keyboard, and a tabindex of 1, which pulls it ahead of everything else in the tab order.
• NexusUI Dial. Flexible about turning (round the centre or by dragging, relative or absolute) but no keyboard, no ARIA, no release since 2020 and a "maintainers wanted" badge. The package says MIT; the repo has no licence file.
• <circular-range> by Mads Stoumann. A circular range slider more than a knob: start and end angles for speedometer and half-circle shapes, ticks and labels, custom properties and ::part() for styling, and it works in forms. Arrow keys but no Home or End. The package says ISC; the repo has no licence file.

Inside component suites

If you already use one of these, use its knob rather than adding a library for one control.

• Mantine AngleSlider (MIT, React). It picks an angle from 0 to 359, not a value between a min and a max, so it's for rotation and direction rather than volume. Arrows that wrap round, Home and End, and marks you can restrict it to.
• Ark UI Angle Slider (MIT), on Zag. Also an angle picker, unstyled, for React, Vue, Solid and Svelte. Grabbing the thumb keeps its offset, so it doesn't jump. One oddity: Up Arrow lowers the value, the opposite of the ARIA slider pattern.
• Quasar QKnob (MIT, Vue 3). A real min-to-max knob built on Quasar's circular progress, with Page keys for big steps. No Home or End.
• PrimeVue, PrimeReact and PrimeNG Knob. The fullest keyboard of the suites, on a 240° arc. The catch is the licence. PrimeVue up to 4.5.5, PrimeReact up to 10.9.9 and PrimeNG up to 21 are MIT. PrimeVue 5, PrimeReact 11 and PrimeNG 22 need a PrimeUI licence key: free for individuals and small companies under their limits (under $1M revenue and fewer than 5 developers, among others), paid above them. The public repos now say they only get security fixes.

Copied into your project

• Analog UI Dial (MIT, React and Tailwind v4). The closest in spirit to mine: lit, hardware-style dials, gauges and switches. The Dial has one of the fullest keyboards of the lot, an endless encoder mode beside the bounded knob, and a detent: one value it snaps to when you get close. It uses a spinbutton role rather than a slider. You install it through the shadcn registry; the npm package its install page shows isn't published yet, and the repo has been quiet since May.
• more-shadcn-svelte Knob (MIT, Svelte 5 and Tailwind). One file in your project, themed with the rest of shadcn-svelte, double-click to reset. It has a slider role but can't be focused and has no keys or label. Since it's your copy, that's quick to add.

Mine

• Detent Dial. A knob with detents you can feel: between two notches it's pulled towards the nearer one, so it sticks, gives and clicks over. It turns by the angle moved, unwrapped so that crossing the bottom is a small step rather than a jump; near the centre, up and down takes over, and Shift slows it to a fifth. A click or tap on the printed scale sets the value there, landing on a notch if it's near one. Page keys go notch to notch, Delete and double-click reset, and the wheel only works once it's focused, so it never takes over the page's scroll. A snap mode makes it a selector. It can click (synthesised, off by default) and give a short vibration at each notch where the browser supports it.
• Search Dial. The dial from an edit console, for moving through time. JOG steps frames under your finger. SHTL is a spring-return shuttle: the further you turn it, the faster it plays, from a quarter speed to 32 times, forwards or back. SCRL is a flywheel you flick and it coasts. A tap left or right of centre moves one notch: a frame in JOG, a second in SCRL, a speed step in SHTL. J, K and L work as they do in editors, and bound to a video or audio element it follows and seeks it. To a screen reader it's a slider over the timeline, read as timecode; the three modes are a radio group.

Both are plain JS and CSS with React, Vue and Svelte wrappers and a custom element, in six finish families (Machined, Wood, Materials, Light, Printed and Screens), each light or dark, Quiet or Tactile. Where they fall short:

• They're paid. The source comes with the Pass, paid once: $99 for the first 50, $129 for the next 50, then $199. Both are free to play with on the site, with a free sign-in.
• Not on npm, but they install with shadcn. npx shadcn add from the site's registry (Pass pieces with a personal token), or download them from the site.
• Young. Neither has had years of other people's bug reports.

What's missing almost everywhere

• Detents. Only Analog UI has one (a single value it snaps to), and its rotary switch draws detent marks. The rest move in plain steps, with no notch to feel.
• Sound and touch feedback. None of the roughly 95 source files I read vibrates, and none of the knobs makes a sound of its own.
• Jog and shuttle. Nothing in the main list does it. The only jog-style web component I found is JogDial.js, from 2019, with no keyboard or ARIA.
• React 19. Three React knobs have peer ranges that stop before it: react-dial-knob, react-rotary-knob and react-knob-headless. They may still work, but npm stops with a peer dependency error unless you pass --legacy-peer-deps.

Knob or slider?

The best guidance I found is about sliders, and most of it carries over:

• Nielsen Norman Group: dragging to a precise value takes fine motor control and is often unrealistic on a touch screen, so use a slider when an approximate value is enough, and let people type when it isn't. A knob is no better at this.
• Apple's guidelines: on the Mac, a circular slider suits values that repeat or run on, like an angle or a count of turns, and tick marks help people find a value. For wide ranges, pair the control with a text field.
• WCAG 2.5.7: a click or tap has to do what the drag does.

So I'd use a knob when people know the hardware it stands for (a gain knob, a thermostat, a selector), when the value goes round, or when a lot of controls share a small space, which is why audio software is full of them. In a form, I'd use a slider or a number field.

How I'd choose

• React, accessible, you draw it: react-knob-headless, after checking its peer range against your React.
• React and Tailwind, hardware look: Analog UI.
• Vue: QKnob if you're on Quasar, slipmatio's control-knob if not.
• Already on Mantine, Ark, Quasar or Prime: the suite's own, and with Prime, check the licence of the version you're on.
• An angle rather than a value: Mantine's or Ark's angle slider.
• Music apps with MIDI: webaudio-controls, knowing screen readers get nothing from it.
• Detents you can feel, sound, or jog and shuttle, without a framework: mine.
• An old jQuery Knob: leave it until you next touch that screen, then move.

Also checked

• precision-inputs: wraps a real range input, so the keys are native; no release since 2021.
• x-knob: a true rotary gesture and endless by default, but built on custom-element APIs that Chrome removed in 2020, so it won't run in current browsers. The x-knob on npm is a different package.
• input-knobs: turns <input type="range"> into a knob with sprite images, from the webaudio-controls author.
• vue-knob-control: Vue 2 style, no keyboard or ARIA, last release 2022.
• react-circular-input: about 12,800 a week. A circular range input you compose from parts, with keys but no ARIA in the source I read; last release 2022.
• react-circular-slider: active, and now published as @fiojs/react-circular-slider, though the downloads are still on the old @fseehawer name.
• audio-ui: React audio controls with film-strip knobs, a developer preview under GPL-3.0 or a commercial licence.
• Vlak's parameter knob: a transparent native range input over a round indicator, so the keys, the role and form reset come from the browser. Neat; you drag it sideways.
• Planes' Physical Knob: paid, with Planes Pro at $99 once.
• Not knobs, despite the names: DialKit (a panel for tuning parameters) and the Tone.js UI elements (none of them is a knob).