Sliders — macOS 27

Read when: you need an exact macOS 27 value for sliders (size, colour, text, effect) as Apple's kit draws it. Owns: Sliders in Apple's macOS 27 kit: components, anatomy, sizes, colours and states, text, effects, kit notes.

Source: specs/sliders.txt from Apple's macOS 27 UI Kit (Sketch, v27.0.3), read 2026-11-01. Values are copied from the kit; derived values say so.

Page glyph: 􀌆 (U+100306). The nested-part folder in the component names is the glyph 􀻃 (U+100EC3); it is written 􀻃 below.

Components

836 components in three groups.

Nested parts (count over all four Appearance × Context pairs):

Every top-level linear slider uses the 50% value (Standard) or +50% value (Center-biased). The other value positions exist only as nested parts to swap in.

Anatomy

Linear slider

Layers of a top-level component, in stacking order from the dump (first listed is the first child):

Inside Knob and Track / Track (120 wide):

Inside Knob and Track (Center):

Tracks/Track - Filled/Show (master 60×4): one rect Track - Filled, 61×4 @0,0 in Light · Content Area and 60×4 @0,0 in the other three, corners 50.

Tracks - Filled Centered (master 60×4):

Tick Marks (master 120×2, stack h gap13 pad0,1,0,1) and Tick Marks - Center-biased (master 120×4, same stack values): five 2×2 rects named 0%, 25%, 50%, 75%, 100% at x = 1, 30, 59, 88, 117, y 0, corners max. In the Center-biased version the 50% mark is 2×4. Marks are 29 apart (derived: 30 − 1), so 27 pt between marks (derived: 29 − 2), which is not the stored stack gap of 13. Instances on the sliders are 120×4.

Knob

Each knob master is a 2-pt-wide anchor with a background fill {x. Kit/Nested Symbol BG Light} #CCE6FF (or …BG Dark #366799). That swatch is the kit's backdrop for nested symbols, not part of the control. The visible knob is the child layer.

Geometry is the same in all four Appearance × Context pairs (checked across all 120 knob masters):

• The idle knob is centred on the anchor (derived, Rg: −9 + 20/2 = 1 = anchor centre).
• The clicked knob is 1.25× the idle knob for Mn, Rg, Lg and XL (derived: 20/16, 25/20, 30/24). For Sm it is 23×18 against 18×14.
• Knob - Ticked is a narrow upright knob only at Mn and Sm. At Rg, Lg and XL it has the same size as Knob.

Circular slider (Dial)

The dump has no rotation values, so the kit shows one grabber position only.

Sizes

Linear slider

All sizes are 140 wide with a 120-wide track. Geometry is identical for every type, state, appearance and context (checked across all 400).

The knob instance is 16 tall and centred on the track (derived: −5 + 8 = 3 = 6/2; −6 + 8 = 2 = 4/2). Knob sizes are in the Knob table above.

Value positions inside the 120-wide track (same for every size, appearance and context):

Circular slider (Dial)

Grabber x = (width − 2)/2 (derived). Both corner values are at least half the width at every size, so both bodies are drawn as circles (derived). Grabber corners 1 at every size.

Colours and states

Values in "Filled track" come from the shared style named by the style→ override on Track + Knob. The colour for that style is copied from control-styles-content-area.md / control-styles-over-glass.md. Idle uses the master's own style. "Unfilled track" shows the layer's style name and the fill stored on the layer, which do not always match (see Light/Dark mix-ups below).

Light · Content Area

Center-biased filled part (Tracks - Filled Centered/…/Visible Fill): Track style Content Area/Light/Tracks/Active, Filled, 01 - Idle · #0088FF. Midpoint #B2B2B2 {Labels/Light Vibrant (use plus darker)/3 Tertiary}, blend plus-darker. The Non-Visible Fill variants hold only this midpoint.

Light · Over-glass

Light/Over-glass/Tick Marks/Disabled (#000000@10% blend plus-darker, style Over-Glass/Light/Tracks/Tick Mark - Disabled) exists but no slider uses it. Center-biased filled part: Track style Over-Glass/Light/Tracks/Active, Filled, 01 - Idle · #0078F0, Midpoint #B2B2B2 (blend plus-darker).

Dark · Content Area

Dark parts no slider uses: Dark/Content Area/Tick Marks/Idle (#FFFFFF@25% {Labels/Dark/3 Tertiary}) and /Disabled (#FFFFFF@10% {Labels/Dark/4 Quaternary}). Both name the Content Area/Light/… tick styles. Dark/Content Area/Tick Marks - Center-biased holds Light values (#000000@25%, centre #000000@85% plus-darker, disabled #000000@10%). Center-biased filled part: Track #0091FF (style Content Area/Dark/Tracks/Active, Filled, 01 - Idle). Midpoint #4C4C4C {Labels/Dark Vibrant (use plus lighter)/3 Tertiary}, blend plus-lighter.

Dark · Over-glass

Center-biased filled part: Track #0A99FF. Midpoint in Visible Fill is #B2B2B2 {Labels/Light Vibrant (use plus darker)/3 Tertiary} with blend plus-lighter. In Non-Visible Fill, Disabled it is #4C4C4C {Labels/Dark Vibrant (use plus lighter)/3 Tertiary} with blend plus-darker.

Circular slider (Dial)

Text

Not in the kit: no slider or dial component contains text (no value labels or tick labels). The only text on the page is the page headings, SFPro-Bold 60 ("Sliders", "Circular Slider (Dial)", "Light", "Dark") and SFPro-Semibold 30 kern −0.46 #000000@50% ("Content Area", "Over-Glass").

Effects

Kit notes

The page has no documentation boards and no written guidance. Its only text is the section headings: Sliders, Circular Slider (Dial), Light, Dark, Content Area and Over-Glass. Not in the kit: guidance on when to use ticks or centre-biased sliders, value labels, vertical sliders, keyboard focus rings and any animation.

Kit mix-ups worth knowing when copying values:

• Dark · Content Area sliders use the Light tick-mark parts, and their unfilled-track style names are Content Area/Light/… while the stored fill is the Dark #FFFFFF@10%.
• Light · Over-glass sliders override the filled bar with Content Area/Light/… styles for Clicked, Disabled and Inactive.
• Size swaps that point at the wrong size: all 2 Sm Light · Content Area Standard and Standard + Ticked sliders use Knob and Track/1 Mn/50% with a 2 Sm knob swapped in. Light · Content Area Center-biased Active, 4 - Disabled swaps in the 4 Lg disabled knob at Mn, Sm, Rg and XL. Light · Over-glass Center-biased + Ticked 2 Sm swaps in the 3 Rg ticked knob. Light · Over-glass Standard + Ticked Inactive, 4 - Disabled at 4 Lg and 5 XL swaps in the 1 Mn ticked knob.
• In the Over-glass Tick Marks - Center-biased parts the 75% mark layer is named 50%.
• Content Area uses the part name Knob and Track and Over-glass uses Track for the same structure.

Finding it in the spec