Slider

Sliders allow the user to make a selection in a visual way by dragging a handle along a track.

Overview

Resources

Install


yarn add @camp/slider

Upgrading to Next Gen

The Slider component is published as @camp/slider (replacing @activecampaign/camp-components-slider). This is a 1:1 migration with no API changes.

🧩 Same API: All props remain unchanged — ariaLabel, ariaLabelledBy, defaultValue, value, showValueLabel, showCenterTickMark, orientation, min, max, step, and onChange work exactly as before.

Migration Steps

Remove @activecampaign/camp-components-slider and install @camp/slider.
Update the import path:


// Previous implementation
import { Slider } from '@activecampaign/camp-components-slider';
 
// New implementation
import { Slider } from '@camp/slider';

Variations

Default

A basic slider with a draggable handle along a horizontal track.


import { Slider } from '@camp/slider';
 
<Slider ariaLabel="Volume" defaultValue={[50]} />;

With Value Label

Display the current value beneath the slider thumb using showValueLabel.


import { Slider } from '@camp/slider';
 
<Slider ariaLabel="Volume" defaultValue={[50]} showValueLabel />;

With Center Tick Mark

Show a tick mark at the center of the track using showCenterTickMark. The tick mark color changes based on whether the value is above or below 50%.


import { Slider } from '@camp/slider';
 
<Slider ariaLabel="Balance" defaultValue={[75]} showCenterTickMark />;

Vertical

Render the slider vertically using orientation="vertical".


import { Slider } from '@camp/slider';
 
<div style={{ height: '150px' }}>
  <Slider ariaLabel="Volume" defaultValue={[50]} orientation="vertical" />
</div>;

All Variants

An overview of all available slider configurations.

Usage

Best Practices

Use sliders when users need to select a value from a continuous range, such as volume, brightness, or a percentage.
Provide an ariaLabel or ariaLabelledBy for every slider to ensure screen readers can identify its purpose.
Use showValueLabel when the exact numeric value matters to the user.
Use showCenterTickMark when the midpoint of the range is meaningful (e.g., balance controls).
Set appropriate min, max, and step values to constrain input to valid ranges.

Content Guidelines

✅ DO

Always provide an accessible label via ariaLabel, ariaLabelledBy, or title.
Use step to limit the slider to meaningful increments when continuous selection is not needed.
Use showValueLabel for sliders where the exact number is important to the user.

🚫 DON’T

Don’t use a slider when the user needs to enter a precise value — use a number input instead.
Don’t omit accessible labels — screen readers rely on ariaLabel or ariaLabelledBy to identify the control.
Don’t use excessively large ranges with a step of 1 where approximate selection is sufficient.

Accessibility

Keyboard Interactions

Tab to focus on the slider handle.
Left / Down arrow to decrease the value by one step.
Right / Up arrow to increase the value by one step.

Screen Readers

Set ariaLabel or ariaLabelledBy to provide a descriptive label for the slider. At least one of ariaLabel, ariaLabelledBy, or title is required.
The slider uses role="slider" with aria-valuenow, aria-valuemin, and aria-valuemax attributes (provided by Radix UI).

Similar Components

Input

Allows users to enter text into a UI. It's a component that handles user input.

Form

A collection of input fields for collecting user information.