`<PluginParameterSlider>`

Linear-slider primitive for a single AudioFxPlugin parameter. Mirrors <PluginParameterKnob>'s a11y contract and exposes a native <input type="range"> for pointer drag while implementing the mandated keyboard keymap directly so step semantics match the knob.

(no submodules)

Purpose

The <PluginParameterSlider> is the linear half of the generic parameter-control surface. It is preferred over the knob when the parameter is naturally horizontal — pan, dry/wet mix, threshold, crossfeed — and when consumers want native touch / pointer drag without an extra dependency.

The slider subscribes to the parameter via the Phase-1 useParameter hook, so per-block parameter updates flow to the UI at the provider's configured sampleRateHz.

Features

Native <input type="range"> for pointer & touch drag, with step set to (max - min) / 100 so drag granularity matches the keyboard fine-step.
role="slider", aria-valuemin, aria-valuemax, aria-valuenow, aria-valuetext (unit-aware via formatAriaValueText).
Full keyboard keymap: ←/→, ↑/↓, PageUp/PageDown, Home/End, Shift ×10, Alt ÷10. Identical semantics to the knob.
orientation prop ("horizontal" | "vertical") reflected on the wrapper as data-orientation.
data-parameter-id for stylesheet targeting.
CSS-class API only (rax-slider, rax-slider__input, rax-slider__label, rax-slider__readout).

Usage: Basic

import { PluginParameterSlider } from "@suaveplan/react-audio/components/plugin-parameter-slider";

function MixSlider({ plugin }) {
    const param = plugin.parameterIndex.get("mix")!;
    return <PluginParameterSlider plugin={plugin} parameter={param} />;
}

Usage: Advanced

// Render a vertical pan slider with a themed wrapper.
function PanSlider({ plugin }) {
    const param = plugin.parameterIndex.get("pan")!;
    return (
        <PluginParameterSlider
            plugin={plugin}
            parameter={param}
            orientation="vertical"
            label="PAN"
            className="ring-1 ring-zinc-700 rounded-md p-2"
        />
    );
}

API Reference

Props

plugin: AudioFxPlugin — the plugin instance bound to the slider.
parameter: PluginParameter — the declaration to render. MUST be present in plugin.parameterIndex.
orientation?: "horizontal" | "vertical" — visual layout hint; defaults to "horizontal".
label?: string — optional visible label override; defaults to parameter.name.
className?: string — optional CSS class appended to the wrapper.

Behaviour

Pointer drags fire the native onChange, which delegates to plugin.setParameter.
Keyboard events bypass the native range step (which would default to 1 and produce mis-stepped values for parameters whose range is smaller or larger than 100) and run through the shared resolveParameterKeyboardChange resolver so step semantics match the knob exactly.
Enter is intentionally a no-op on the slider; consumers expecting a type-edit affordance should use <PluginParameterKnob>.

Implementation Notes

The native step attribute is (max - min) / 100, falling back to 0.0001 for degenerate min === max declarations. The keyboard handler never reads the native step.
The slider does not animate; pointer & keyboard interactions write the parameter directly and the next provider sample reads it back.
A <label htmlFor> link is used so click-to-focus on the label works without any JavaScript wiring.

3.6 KiB Raw Blame History Unescape Escape

<PluginParameterSlider>