Slider
A linear slider component for continuous value adjustment with support for both horizontal and vertical orientations.
The Slider component provides a linear control for continuous value adjustment. It shares the same layout, parameter model, interaction, and accessibility as other vector components; see the Vector introduction.
- Multiple visual variants: abstract, trackless, trackfull, stripless
- Flexible orientation: horizontal and vertical layouts
- Extensive cursor customization: image-based cursors, custom styling, aspect ratio control
- Full theming support: color, roundness, thickness customization
Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
value | number | — | Yes | Current value of the control |
onChange | (event: AudioControlEvent<number>) => void | — | No | Handler for value changes |
min | number | — | No | Minimum value (ad-hoc mode) |
max | number | — | No | Maximum value (ad-hoc mode) |
step | number | 1 | No | Step size for value adjustments |
bipolar | boolean | false | No | Whether the component should operate in bipolar mode (centered at zero) |
label | string | — | No | Label displayed below the component |
variant | "abstract" | "trackless" | "trackfull" | "stripless" | abstract | No | Visual variant of the slider |
orientation | "horizontal" | "vertical" | vertical | No | Orientation of the slider |
thickness | number | 0.5 | No | Thickness of the slider (normalized 0.0-1.0, maps to 1-50) |
valueAsLabel | "labelOnly" | "valueOnly" | "interactive" | labelOnly | No | Controls how the label and value are displayed |
cursorSize | "None" | "Strip" | "Track" | "Tick" | "Label" | — | No | Cursor size option - determines which component's width is used for the cursor |
cursorAspectRatio | number | — | No | Aspect ratio of the cursor |
cursorRoundness | number | string | — | No | Overrides the roundness factor of the cursor. Defaults to `roundness` |
cursorImageHref | string | — | No | Optional image URL to display as cursor |
cursorClassName | string | — | No | Optional CSS class name for the cursor |
cursorStyle | React.CSSProperties | — | No | Optional inline styles for the cursor |
color | string | — | No | Component primary color - any valid CSS color value |
roundness | number | — | No | Roundness for component corners (normalized 0.0-1.0) |
adaptiveSize | boolean | false | No | Whether the component stretches to fill its container |
size | "xsmall" | "small" | "normal" | "large" | "xlarge" | normal | No | Size of the component |
parameter | ContinuousParameter | — | No | Audio Parameter definition (Model). If provided, overrides min/max/step/label/bipolar from ad-hoc props |
valueFormatter | (value: number, parameterDef: AudioParameter) => string | undefined | — | No | Custom renderer for the value display |
interactionMode | "drag" | "wheel" | "both" | both | No | Interaction mode |
interactionSensitivity | number | — | No | Sensitivity of the control (normalized value change per pixel/unit) |
interactionDirection | InteractionDirection | — | No | Direction of the interaction |
Basic Usage
The Slider component requires a value and onChange handler. By default, sliders are vertical:
Orientation
Sliders can be oriented horizontally or vertically:
Vertical Slider
The default orientation, suitable for fader-style controls:
Horizontal Slider
Useful for pan controls and other horizontal adjustments:
Variants
The Slider component supports four visual variants:
Abstract
The default variant with a clean, minimal design:
Trackless
A variant without a visible track:
Trackfull
A variant with a full track visible:
Stripless
A variant without a value strip:
Cursor Customization
The Slider component provides extensive options for customizing the cursor appearance:
Cursor Size
The cursorSize prop determines which component's width is used for the cursor:
Cursor Aspect Ratio
Control the aspect ratio of the cursor:
Cursor Roundness
Override the roundness of the cursor independently from the slider:
Custom Cursor Image
Use a custom image for the cursor:
Cursor Styling
Apply custom CSS classes or inline styles to the cursor:
Theming
Vector components share common theming features; see Theming Features in the Vector introduction for an overview. The Slider component supports theming through the color and roundness props:
Color Customization
Roundness
Control the roundness of the slider track and cursor:
Thickness
Adjust the thickness of the slider track:
Bipolar Mode
In bipolar mode, the slider visualizes values relative to a center point. This is ideal for pan controls:
Value Display
The valueAsLabel prop controls how the label and value are displayed:
Value Formatting
Customize how values are displayed using the valueFormatter prop:
Parameter Model
Use a parameter model for integration with audio parameter systems. The following example uses ad-hoc props; with the full library you would use createContinuousParameter and the parameter prop:
Adaptive Sizing
The Slider component supports both fixed sizes and adaptive sizing. By default, the size of the component is driven by the Size System and their size attribute:
Adaptive sizing allows the component to adapt to the size of its parent container, adjusting its dimensions intelligently without causing distortion (scaleToFit display mode). The fill display mode makes the component fill the entire container, potentially distorting it.
Interaction Modes
Control how users interact with the slider:
Adjust the sensitivity of interactions:
Common Patterns
Volume Fader
A typical vertical volume fader:
Pan Control
A horizontal pan control with bipolar mode:
Next Steps
- Explore the Knob component for rotary controls
- Learn about Button and CycleButton for discrete interactions
- Check out FilmStripContinuousControl for bitmap-based sliders
- Visit the playground for interactive examples