Figma slider components

A slider trades precision for speed. Dragging a handle across a track feels faster and friendlier than typing a number, which is exactly why sliders belong in some interfaces and wreck others. The 2 slider components and 39 variants above give you the range control done properly, and the guidance below covers when to reach for it. One disambiguation up front: this page is about range controls, not image carousels. If you're after rotating content, that's the carousel components.

When a slider beats an input field

Sliders shine when the value is approximate and the feedback is immediate: volume, brightness, a price range on a search filter, the hue and opacity tracks in a color picker. Nielsen Norman Group's slider guidelines put it plainly: when users need an exact value, sliders frustrate, because hitting precisely 37 with a drag is a dexterity test.

For exact numbers, use an input field or a number counter, and let sliders own the "roughly this much" cases. The best filter panels often do both, with a range slider for feel and small inputs beside it for precision.

Anatomy: track, fill, handles, and labels

Each slider is a track with a filled active section and one or two 24×24px handles. Dual handles turn it into a range slider, the pattern behind every min and max price filter, and the set covers the useful handle positions in 25% steps so you can show any state of the range without dragging vectors around.

Value labels come in three placements: below the track, floating above the handles, or hidden. Floating labels suit filters where the number matters while dragging; the below-track placement suits settings screens where the value should stay readable at rest; hidden works when the position itself is the message, like a volume control. The handles themselves can show their current value as plain text or as a tooltip, which keeps the number attached to the thing users are dragging.

Handle states matter more on a slider

The handles include default, hover, and focused states. Focus deserves the extra attention here because sliders are one of the few controls operated heavily by keyboard: arrow keys adjust the value in real implementations, which is the core of the W3C slider pattern.

A visible focus ring on the handle is what makes that usable. The 24px handles also sit right at the WCAG minimum target size, so they stay draggable on touchscreens without dominating the layout.

Prototyping sliders in Figma, honestly

Figma prototypes can't do true continuous dragging with a live value readout, and it's better to know that up front than to discover it mid-build. The practical approach is steps: since the handle positions exist as variants in 25% increments, you can wire "change to" interactions (or drag triggers between variants) so testers move the slider through fixed stops.

For a usability test, that's almost always enough to answer the question you're testing: whether people understand the filter, not whether they can hit pixel 214 of 320. Figma's interactive components guide covers the wiring.

Real dragging arrives with code. Untitled UI React sliders are open source, built with Tailwind CSS and React Aria, with smooth pointer dragging, keyboard control, and range semantics handled for you.