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 @activecampaign/camp-components-slider

Usage

Default slider

import {Slider} from '@activecampaign/camp-components-slider'
 
<Slider
    ariaLabel="Example Slider"
/>

Center tick mark and value label

import {Slider} from '@activecampaign/camp-components-slider'
 
<Slider
    ariaLabel="ExampleSlider"
    showCenterTickMark
    showValueLabel
/>

Accessibility

Keyboard interactions

• tab to focus on the slider
• When the slider handle is in focus, left or up arrows to move the slider handle forward. right or down arrows to move the slider handle backward.

Screen readers

• Set ariaLabel and ariaLabeledBy to add a title to the slider for screen readers. This is required for accessibility purposes.