Note Range Selector

note-range-selectorControls

A compact keyboard for choosing a span of notes.

$ pnpm dlx shadcn@latest add @pluginui/core-note-range-selector
Loading interactive preview…

Install

Copies the source into your project. Anything it depends on comes with it. Run this in your React project with shadcn initialized; no registry configuration is needed.

Pulls in

range-sliderconsole-buttonkeyboard-geometrycontrol-theme
Install using the registry URL
$ pnpm dlx shadcn@latest add https://pluginui.com/r/core-note-range-selector.json

Usage

Connect the documented props to your application or host.

example.tsx
import { NoteRangeSelector } from "@/components/ui/note-range-selector"

<NoteRangeSelector
  value={range}
  min={21}
  max={108}
  defaultValue={[58, 89]}
  onValueCommitted={setRange}
/>
About Note Range Selector

Set the lowest and highest note on a bounded keyboard. Semitone and octave keyboard steps, named pitches and an optional reset share the kit's Base UI range slider. Defaults to A0–C8; supply narrower instrument bounds or the full MIDI span. A local gesture draft supports hosts that save only on commit.

Props

PropTypeDefaultDescription
valuereadonly [number, number]—Controlled low and high MIDI notes; middle C is 60 (C4).
min / maxnumber—Whole MIDI notes bounding the keyboard, default 21 / 108 (A0–C8).
defaultValue / resetLabelreadonly [number, number] / string—Optional Reset target and button text. Target is clamped within the bounds.
onValueChange / onValueCommitted(value: [number, number]) => void—Every edit, or one completed gesture/reset for persistence.
formatValue / thumbLabels(note: number) => string / readonly [string, string]—Pitch spelling and accessible names for the two bounds.
disabledboolean—Disables both the keyboard range and Reset.

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