Slider – Carbon Design System

Preview the slider component with the React live demo. For detailed code usage documentation, see the Storybooks for each framework below.

Documentation

React

Angular (Community)

Vue (Community)

Web Components (Community)

Live demo

Theme selector

CodeSandbox React Angular Vue Vanilla Web Components

Live editor for the Slider component


  <div className="some-container">
<Slider
  ariaLabelInput="Label for slider value"
  id="slider"
  labelText="Slider label"
  max={100}
  min={0}
  step={1}
  stepMultiplier={4}
  value={50}
/>
</div>


  <div className="some-container">
<Slider
  ariaLabelInput="Label for slider value"
  id="slider"
  labelText="Slider label"
  max={100}
  min={0}
  step={1}
  stepMultiplier={4}
  value={50}
/>
</div>

Edit this page on GitHub

Slider: Style

Slider: Accessibility