Updated
Slider
Slider lets people set a value, or a range, by dragging a thumb along a track.
Updated
Preview
Continuous value selection across a known range. A label, an amount, and a 324 wide track with one thumb on it, inside a 340 wide frame. Drag it, or focus it and use the arrow keys.
Source: the Slider and Range Slider sets of the Appetite UI Figma file, read on October 2, 2026.
The label hugs left at 14/20 and the amount fills the rest of the row at 12/16, on the same baseline.
The thumb is a 16 white circle with a 1 stroke in border/sub-200, a brand dot and dropShadow/sm. The stroke and the shadow keep it visible on a light track and a light screen.
Which values can Slider take?
Five variants, each a progress width on the same 324 track. The thumb center sits on the end of the line.
Each step is a quarter of 324, so the progress line runs 81, 162, 243 and 324. At 0 percent the line is 1 wide, a real node that rounds to nothing, and the dot inside the thumb turns gray so an empty slider does not look filled.
The track is inset 8 on each side, so the thumb stays inside the 340 frame at both ends.
How does Range Slider work?
Range Slider is a second set with a thumb at each end of the line. Eleven of the twenty Left by Right combinations exist.
Left 0 with Right 0 is the default on both axes. It is the empty range: the thumbs sit at the two ends like 0 to 100, but the line and both dots are bg/soft-100, so set both bounds on every instance you use.
Every other variant puts both thumbs on the bound it marks and paints the span in brand/base. The range specimens are static, because a range has two bounds and one pointer cannot say which of them moved.
Properties
Two sets, three variant axes, and the same three text and visibility properties on both.
| Property | Type | Default |
|---|---|---|
Percentage | 0%, 25%, 50%, 75%, 100%, on Slider | 0% |
Left Range | 0%, 25%, 50%, 75%, on Range Slider | 0% |
Right Range | 0%, 100%, 25%, 50%, 75%, on Range Slider | 0% |
Label | Boolean, on both | True |
Label Text | Text, on both | Label |
Amount Number | Text, on both | Value |
| Set | Variants | Size |
|---|---|---|
Slider | Five, on Percentage | 340 x 40 |
Range Slider | Eleven of twenty, Left crossed with Right | 340 x 40 |
Percentage is a five step axis, so any value between the quarters is an override. The set has no states: no pressed, no disabled and no focused variant.
The live specimens add a brand halo under a pointer and a 2 pt focus ring from the keyboard. With Label off the component is 16 tall.
Tokens
Six colors and one effect style, resolved in Light and Dark.
| Token | Light | Dark | Applied to |
|---|---|---|---|
brand/base | #155DFC | #2B7FFF | Progress line and the dot inside the thumb |
bg/soft-100 | #E9E9EA | #48484A | The track, the dot at 0 percent, and the empty Range Slider default |
static/static-white-0 | #FFFFFF | #FFFFFF | The thumb, one value in both modes |
border/sub-200 | #D1D1D6 | #48484A | The 1 stroke round the thumb |
text/strong-950 | #0E0E0F | #FFFFFF | Label |
text/sub-700 | #48484A | #C7C7CC | Amount |
dropShadow/sm | effect | effect | The thumb |
The thumb reads static/static-white-0, so it stays white on the dark theme. The stroke separates it from a light track and carries the thumb in dark.
How does Slider differ on iOS and Material 3?
Appetite UI Slider is one shape on both platforms: a 6 tall track with a 16 round thumb, plus a label and an amount. The iOS page of the file has its own slider, and the Material 3 pages have none.
| Appetite UI | iOS counterpart | Material 3 counterpart | What differs |
|---|---|---|---|
| Slider and Range Slider | iOS / Slider, 320 x 28, State Idle and Disabled by Value 0 to 100, with a Show Ticks switch that is off by default | None in the file. Compose ships Slider and RangeSlider | The iOS knob is a 38 x 24 white capsule with no stroke under a soft shadow, on a 6 tall track at radius 3, and the fill ends under the knob center. Show Ticks adds five 4 pt dots along the track. Disabled recolors the fill to iOS/systemGray and keeps the knob white. Appetite UI uses a 16 circle with a stroke and a shadow. iOS has no range set and no label row. |
The minimum touch target is 44 pt on iOS and 48 dp on Android, set by platform/min-touch-target in the Platform collection. The 16 thumb is far under both, and the file draws no hit area, so give the track at least that height in code.
The iOS knob is 24 tall, which also needs padding. See Platform Bridge, iOS and Material 3.
Guidelines
Do
Keep the amount on screen. A thumb three quarters along says nothing by itself, and the number is the only part of this component that names the value.
Don't
Do not turn the label off and leave the track on its own. Without a readout the user is guessing, and a slider nobody can read is decoration.
Reach for a slider when the direction matters more than the exact number: volume, brightness, a price filter. When the value has to be exact, a stepper or a field beats it.
Update the amount live as the thumb moves, because the number is the feedback. Use the range set for genuine bounds, not for two unrelated values that share a scale.
Expose the value to assistive technology. A slider is a role with a name, a minimum, a maximum and a current value, the arrow keys move it one step, Page Up and Page Down move it ten, and Home and End jump to the ends.
The label in this component is its accessible name.