Slider

Overview

Slider is a continuous value selection component for adjusting numeric values within a defined range. Two shapes, three sizes, single and range modes, plus bar and rail fill styles make it a natural fit for volume controls, price filters, opacity settings, and any value picker where dragging feels more natural than typing a number.

When should you use them?

Use a slider when someone needs to pick a value within a known range and direct manipulation feels more natural than typing, like volume, opacity, brightness, or a price filter. Use single mode for one value and range mode for a min and max. Reach for a number input or stepper instead when an exact, typed value matters more than dragging.

How should you use them?

• Use a slider for adjusting a value within a defined range; use a number input or stepper when precise entry matters more.
• Use single mode for one value and range mode for a min-max selection.
• Use bar fill for magnitude like volume or progress, and rail fill for discrete snap points or steps.
• Show the current value near the slider so the exact number is always clear.
• Match the variant to importance: Primary for prominent controls, Neutral for secondary or toolbar sliders.
• Make sure the slider is operable with arrow keys and has an accessible label and value for screen readers.