Parameter Slider for React

audiocn's labelled slider with a numeric input, unit, marks and reset, restyled for Videorc. For every setting that isn't a volume.

Microphone sync

Moves your voice later (+) or earlier (−) to line up with the video.

This is a fork of audiocn's Parameter Slider (MIT). Its behaviour, parts and props are upstream's; only the paint differs:

The range is chrome-fill, not bg-primary.
The thumb is a chrome-bead on the knob's hairline rim (ring-knob-ring), like every Videorc slider.
Reset sits on rounded-row.

Installation

$ pnpm dlx shadcn@latest add @videorc/parameter-slider

The slider builds on audiocn's core (@audiocn/core and @audiocn/use-audio-config), so add the @audiocn namespace to components.json as well:

components.json

{
  "registries": {
    "@videorc": "https://ui.videorc.com/r/{name}.json",
    "@audiocn": "https://audiocn.dev/r/{name}.json"
  }
}

Usage

import {
  ParameterSlider,
  ParameterSliderControl,
  ParameterSliderHeader,
  ParameterSliderInput,
  ParameterSliderLabel,
} from "@/components/ui/parameter-slider";

<ParameterSlider
  max={1000}
  min={-1000}
  onValueChange={setOffsetMs}
  unit="ms"
  value={offsetMs}
>
  <ParameterSliderHeader>
    <ParameterSliderLabel>Microphone sync</ParameterSliderLabel>
    <ParameterSliderInput />
  </ParameterSliderHeader>
  <ParameterSliderControl />
</ParameterSlider>

Use it for gain trims, delays, thresholds, times, frequencies and percentages. For a volume, use Fader.

Anatomy

<ParameterSlider>
  <ParameterSliderHeader>
    <ParameterSliderLabel />
    <ParameterSliderReset />
    <ParameterSliderInput />
    <ParameterSliderValue />
  </ParameterSliderHeader>
  <ParameterSliderControl />
  <ParameterSliderMarks />
  <ParameterSliderDescription />
</ParameterSlider>

Examples

Read-only value

Show ParameterSliderValue in place of the input when typing a number adds nothing, as for a banner's opacity.

Banner opacity85 %

Log scale with marks

scale="log" gives each octave the same travel, which suits frequencies and times. marks labels points along the track.

Microphone low cut80 Hz

Filters out rumble below this frequency, like a desk fan or a footstep.

Theming

Token or attribute	Meaning
`chrome-fill`	The range
`bg-input/90`	The 4 px track
`chrome-bead`	The thumb
`ring-knob-ring`	The thumb's hairline rim; a 4 px ring on hover, focus and drag
`rounded-row`	Reset
`data-modified`	The value differs from `resetValue`
`data-disabled`	Dims to 50%
`data-slot`	`parameter-slider`, `parameter-slider-header`, `parameter-slider-label`, `parameter-slider-input-group`, `parameter-slider-input`, `parameter-slider-unit`, `parameter-slider-value`, `parameter-slider-reset`, `parameter-slider-control`, `parameter-slider-track`, `parameter-slider-range`, `parameter-slider-thumb`, `parameter-slider-marks`, `parameter-slider-description`

Keyboard

Key	Action
`←` `→` `↑` `↓`	Changes the value by `step`
`Shift` with an arrow, `Page Up` `Page Down`	Changes it by `largeStep`
`Home` `End`	Moves to the minimum or maximum

The number input takes the arrow keys and typing, and dragging the unit beside it scrubs the value.

Accessibility

The label names both the slider thumb and the number input.
ParameterSliderDescription describes the thumb.
The thumb's aria-valuetext is the formatted value with its unit.

API reference