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

Props

Prop	Type	Default	Description
`ariaLabel`	`string`	—	`aria-label` applied to slider (this or `ariaLabelledBy` or `title` must be used).
`ariaLabelledBy`	`string`	—	`aria-labelledby` applied to slider (this or `ariaLabel` or `title` must be used).
`defaultValue`	`number[]`	`[0]`	The default value.
`max`	`number`	`100`	The maximum value for the range.
`min`	`number`	`0`	The minimum value for the range.
`onChange`	`(value: number[]) => void`	—	Function occurring when value changes.
`orientation`	`"horizontal" \| "vertical"`	—	The orientation of the slider.
`showCenterTickMark`	`boolean`	—	Show a tick mark at the center of the slider track.
`showValueLabel`	`boolean`	—	Show value label beneath the thumb of the slider.
`step`	`number`	`1`	The stepping interval.
`themed`	`boolean`	`true`	Whether the component adapts to the current theme context.
`title`	`string`	—	`title` attribute applied to slider (this or `ariaLabel` or `ariaLabelledBy` must be used).
`value`	`number[]`	—	The controlled value of the slider.

Generated from @camp/slider@5.7.0 source, ordered by production usage. * required.

Upgrading to Next Gen

The Slider component is published as @camp/slider (replacing @activecampaign/camp-components-slider). The props you already use are unchanged; the one addition is theming.

🔆 Themed by default: Slider now has a themed prop that defaults to true, so the track, range, handle, and value label follow the surrounding light or dark theme and need a ThemeProvider. Pass themed={false} to pin the slider to the light theme on a screen that has no provider yet. Earlier @camp/slider releases had no themed prop and always rendered light.

🧩 Same API otherwise: ariaLabel, ariaLabelledBy, title, 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';

Make sure the slider renders inside a ThemeProvider, or pass themed={false} to keep a light-only screen working without one.

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. The label is hidden while the value is 0.

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>;

Themed

themed defaults to true. The story below renders the slider with themed={true}, with themed={false}, and with the prop omitted. Switch Storybook to dark mode to see the themed={false} slider stay light while the other two follow the theme.

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

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.
Leave themed at its default inside a ThemeProvider; reach for themed={false} only on screens that cannot provide one yet.

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.
Page Up / Page Down (or Shift + arrow) to move by ten steps.
Home / End to jump to min or max.

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.