Syntho

CC Knob Strip

cc-knob-stripControls

A row of assignable CC controls: each chip is a mini knob with a CC-number badge. Turning is the ordinary knob gesture; reordering starts from a separate grip handle, so a drag is never mistaken for a value change. Pointer and arrow keys both reorder.

CC74
88Cutoff
CC71
34Reso
CC1
12Mod
CC91
56Verb

Turn a knob, or drag a chip by its grip to reorder.

Install

Copies the source into your project. Anything it depends on comes with it.

$ npx shadcn add @syntho-ui/cc-knob-strip

Pulls in

knobcontrol-themecontrol-formatcontrol-skin

First time? Add the registry to your components.json once:

components.json
{
  "registries": {
    "@syntho-ui": "https://engine.syntho.app/r/{name}.json"
  }
}

Usage

Controlled or uncontrolled, whichever suits the surrounding state.

example.tsx
import { CCKnobStrip } from "@/components/ui/cc-knob-strip"

<CCKnobStrip
  controls={controls}
  onChange={(id, value) => setControls(update(id, value))}
  onReorder={(order) => setControls(sortBy(order))}
/>

Props

PropTypeDefaultDescription
controlsCCControl[]—The chips in display order. Each carries id, cc, label, value and an optional range.
onChange(id, value, control) => void—Fires when a chip's knob moves.
onReorder(order: string[], from: number, to: number) => void—Fires on drop with the full reordered id list.
reorderablebooleantrueTurn off reordering and hide the grips.
knobSizenumber40Knob diameter inside each chip.
knobSkin"default" | "flat" | "vintage" | "minimal" | "neon""default"Visual finish for the chips' knobs, shared with every other control in the kit. A strip forwards a skin rather than inventing a look of its own, so a vintage strip is made of vintage knobs. Omitted, the chips inherit from a surrounding ControlSkinProvider.

Interaction

  • Drag with pointer capture, so the gesture keeps tracking past the edge of the control.
  • Shift while dragging for a fine pass; release it mid-gesture and coarse tracking resumes.
  • Double-click resets to defaultValue.
  • Arrow keys step normally, Shift+arrow steps finely, PageUp/PageDown jump by ten, Home/End go to the extremes.
  • Proper slider and switch roles with live aria-valuetext, so a screen reader announces the formatted value rather than the raw number.
  • The scroll wheel adjusts the value while the pointer is over the control; stepped ranges move at least one declared step per notch by default.
All controlsStart building