Figma Slider

Figma Slider Component

The Figma slider lets a user pick one value, or a range between two values, by dragging a knob along a track. Frames X ships it as five component sets with 60 variants: a single Slider, a two-knob Slider Range, a Slider Input with editable value fields at both ends, a bare BarSlider track, and the SliderKnob that all of them share. Every set comes in Small, Medium and Large, with a Disabled state and a dark mode.

Pick the variant by what the user needs to see: a numeric scale when exact values matter, text labels when only the ends and the middle do, and value fields when the number has to be typed as well as dragged.

What is in the Figma slider kit

1. Slider: one knob on a track with a label row above it. The Numeric type shows a 0 to 100 scale with tick marks every 10; the Text type shows Start, Middle and End. Row height 50, 60 or 68px.

2. Slider Range: the same label row with two knobs and the fill between them, for price, date and size filters. Numeric and Text types, same three sizes.

3. Slider Input: a track with a value field at each end, 36, 44 or 56px tall, so the user can type 0 or 100 instead of dragging. Single and Double types.

4. BarSlider: the track on its own, 4, 6 or 8px thick, in Single and Double types. Use it inside media players, volume controls and settings rows where labels would be noise.

5. SliderKnob: a 20, 28 or 32px knob with Active, Tooltip and Disabled properties. The Tooltip variant shows the current value in a dark pill above the knob while dragging.

How to make a slider in Figma

1. Start from the track. Draw a full-width rail and a shorter fill rectangle on top of it, then wrap both in an auto layout frame. In the kit this is the BarSlider; its fill length is the Bar spacing value, so moving the knob is one number, not a redraw.

2. Add the knob as its own component. Give it a Size property for the three heights, an Active boolean for the pressed ring, a Tooltip boolean for the value pill and a Disabled boolean. One SliderKnob feeds every slider set, so a change to its shadow or border updates all 60 variants.

3. Compose the slider. Place the label row (scale or Start, Middle, End) above the BarSlider and the knob on top of it, then turn the group into a component set with Type, Size and Disabled as variant properties.

4. For a range slider, duplicate the knob and switch the track to the Double type so the fill sits between the two knobs. For a slider with input, add the Text Input component at each end of the track.

5. Wire the states in prototype: Default to Active on mouse down and back on mouse up, Tooltip on while dragging. The result behaves like the sliders in the Player and Settings templates, which are built from these same sets.

Slider UI best practices

1. Show the value. A slider without a number is a guess: use the Numeric scale, the knob tooltip or the Slider Input fields whenever the exact value matters.

2. Keep the knob at least 28px on touch screens. The Medium and Large knobs clear the 24px minimum target size; Small is for dense desktop panels.

3. Use a range slider for filters with two bounds and a single slider for one setting. Two single sliders for a price range read as unrelated controls.

4. Disable, do not hide. The Disabled variants keep the layout stable when a setting is unavailable, which is why every set carries one.

5. Match the track thickness to the row: 4px inside compact lists, 6px in forms, 8px in standalone controls such as a volume or brightness slider.

Slider Anatomy

The file carries five slider sets with 60 variants: Slider and Slider Range in Numeric and Text label types, Slider Input with value fields, BarSlider in Single and Double, and the SliderKnob with Active, Tooltip and Disabled properties, each in Large, Medium and Small, in light and dark mode.

Slider AI Prompt

Paste this into Claude, ChatGPT, or Figma Make:

Figma slider FAQ

Does Figma have a built-in slider component? No. Figma has no native slider; you build one from a track, a fill and a knob, or paste a ready set. The Copy component buttons above put each Frames X slider set on your clipboard, and it pastes into any file.

How do I make a range slider in Figma? Use the Slider Range set, or take a single slider, switch its BarSlider to the Double type and add a second knob. The fill then runs between the two knobs instead of from the start.

Can the slider be interactive in a prototype? Yes. The knob has Active and Tooltip states, so a while-pressing interaction on the knob plays the drag feedback. Real dragging to an arbitrary value is not something Figma prototypes do; show two or three positions as variants instead.

Which other form controls match the slider? Counter, Toggle, Radio Group and Select Box share the same height ladder (36, 44, 56px), so a settings form built from them lines up without manual nudging.