audiocnParameter Slider
A labelled slider with a numeric input, unit, marks and reset, for everything that is not a volume.
Installation
$ pnpm dlx shadcn@latest add @audiocn/parameter-sliderUsage
import {
ParameterSlider,
ParameterSliderControl,
ParameterSliderHeader,
ParameterSliderInput,
ParameterSliderLabel,
} from "@/components/ui/parameter-slider";<ParameterSlider
min={-1000}
max={1000}
step={5}
unit="ms"
value={ms}
onValueChange={setMs}
>
<ParameterSliderHeader>
<ParameterSliderLabel>Sync offset</ParameterSliderLabel>
<ParameterSliderInput />
</ParameterSliderHeader>
<ParameterSliderControl />
</ParameterSlider>Use it for gain trims, delays, thresholds, times and frequencies. For volume, use Fader.
Anatomy
<ParameterSlider>
<ParameterSliderHeader>
<ParameterSliderLabel />
<ParameterSliderReset />
<ParameterSliderInput />
<ParameterSliderValue />
</ParameterSliderHeader>
<ParameterSliderControl />
<ParameterSliderMarks />
<ParameterSliderDescription />
</ParameterSlider>Examples
Log scale with marks
Theming
| Data attribute | Meaning |
|---|---|
data-modified | The value differs from resetValue |
data-disabled | Disabled |
Accessibility
- The label names both the slider and the number input.
ParameterSliderDescriptiondescribes the slider thumb.- The same keys as the fader work on the thumb; the number input supports arrow keys and typing.
- Drag the unit next to the input to scrub the value.
API reference
Prop
Type
ParameterSliderInput
Prop
Type