Slider

Atom

Range input for selecting a numeric value along a continuous track. Mirrors Figma nodes 5877-41490 + 147-5057 (light) + 5967-1515 + 5967-1479 (dark). Three track heights (4 / 8 / 12 px). Thumb stays 16 px at all sizes, centred on the track via margin-top: calc((--track-h - 16px) / 2). Hover/drag show a translucent ring (--slider-ring-hover/active). Two count display modes — use exactly one: .has-tip shows a tooltip pill only on hover or drag; .has-val shows a permanent label below the track. Range variant uses two overlapping inputs. 6 tokens drive all colours including dark-mode inversion.

When to use

✅ Do

Use for continuous ranges where approximate values are acceptable (volume, brightness, opacity)
Use the Range variant when the user needs to define both a minimum and maximum
Use .has-tip to show the value on hover/drag without cluttering the UI
Use .has-val when the current value must always be visible
Always show min and max labels so users understand the scale

❌ Don't

Use when the user needs to enter a precise value — use Text Input instead
Use both .has-tip and .has-val on the same slider — choose one
Use without visible min/max context — the range must be communicated
Use for selecting from a discrete list of options — use Radio or Dropdown instead

DigiLawyer Patterns

No specific DigiLawyer patterns documented yet — to be added.

Anatomy

A Slider is composed of a field wrapper, a native range input (track + thumb), and optional value display elements.

1Field wrapper — .slider-field. Contains the input, tooltip, and value label.
2Track — The grey background bar. Height set by --track-h CSS variable (4/8/12px).
3Fill — Coloured portion showing progress. Driven by --pct CSS custom property set by JS.
4Thumb — 16px circle, always centred on the track via margin-top: calc((--track-h - 16px) / 2).
5Tooltip — .slider-tip. Hidden at rest; shown on hover/drag (.has-tip).
6Value label — .slider-val. Permanent label below the track (.has-val).

Default

A bare .slider-field with no count display — just the track and thumb. Hover the thumb to see the translucent ring; drag to see it expand. The size is the default (4 px track). Add .has-tip or .has-val to display the value.

50%

100%

Add .has-tip to the field and include a .slider-tip span. The pill is hidden at rest and fades in on hover or drag — ephemeral, space-efficient. Hover or drag the demos below to see it appear. Use this variant when you want minimal UI at rest.

Hover / drag me

Mid-value

Bottom count

Add .has-val to the field and include a .slider-val span. The label below the track is always visible and updates as you drag — permanent, always legible. Use this variant when the current value should be constantly visible.

Range

Two-thumb variant. Add .slider-range to the field and nest two inputs inside .slider-range-track. The fill between thumbs is driven by --pct-a / --pct-b. The JS constraint prevents min from crossing max. Combine with .has-tip or .has-val for dual count display.

Range with tooltip (hover/drag to reveal)

30 70

Range with bottom count (permanent)

0 100

Sizes

Three track heights. Default (no modifier) = 4 px — thin, minimal. .slider-md = 8 px — standard density. .slider-lg = 12 px — accessible, high-contrast. Thumb stays 16 px at all sizes; margin-top auto-centres it on each track via calc((--track-h − 16px) / 2).

Small · 4px (default)

Medium · 8px

Large · 12px

States

Default (interactive) and Disabled. Hover the Default thumb to see the translucent ring; drag for the larger ring. Disabled renders at 38% opacity with cursor: not-allowed. Toggle dark mode to confirm the ring tokens flip to white-alpha.

Default — hover / drag thumb

Disabled

Interactive

Live demos — drag any thumb. Toggle the theme switch to confirm dark mode: track goes 10%-white, fill + thumb turn white, tooltip inverts to white pill + dark text. The ring halos also flip to white-alpha.

Single — tooltip (hover or drag)

Single — bottom count (permanent)

Range — tooltip (hover or drag either thumb)

25 75

Accessibility

Built on a native <input type="range"> — keyboard and ARIA semantics are implicit.

Attribute / Behaviour	Value	Notes
Role	`slider`	Implicit from native `<input type="range">`
Keyboard — increment	`→` / `↑`	Increases value by one step
Keyboard — decrement	`←` / `↓`	Decreases value by one step
Keyboard — jump	`Home` / `End`	Jumps to minimum or maximum value
`aria-label`	Descriptive string	Required — "Volume", "Price range", etc. The track alone has no visible label.
`aria-valuemin/max/now`	Numeric	Implicit from `min`, `max`, `value` attributes

API

Class / attr	On	Description
.slider-field	<div data-slider>	Wrapper. Sets `--track-h: 4px` by default. Add modifiers for display and size. `data-slider` auto-inits the JS helper.
.has-tip	.slider-field	Tooltip display mode. Adds `padding-top: 36px`. The `.slider-tip` is hidden at rest; visible on `:hover` or `.is-dragging`.
.has-val	.slider-field	Bottom label display mode. Adds `padding-bottom: 24px`. The `.slider-val` is always visible; JS updates its position and text on every input event.
.slider-md	.slider-field	Medium track — 8 px. Sets `--track-h: 8px`; margin-top auto-adjusts thumb centering.
.slider-lg	.slider-field	Large track — 12 px. Sets `--track-h: 12px`.
.slider	<input type="range">	Styled native range input. `height: 16px` (= thumb diameter) ensures the UA vertically centres the track within the element so margin-top math works. `--pct` drives the fill gradient.
.slider-tip	<span> inside .has-tip field	Tooltip pill above the thumb. Hidden (`opacity: 0`) at rest; shown on hover / `.is-dragging` on the parent field.
.slider-val	<span> inside .has-val field	Permanent bottom label. JS sets `style.left` and `textContent` on every input event.
.slider-range	.slider-field	Range variant. Requires `.slider-range-track` + `.slider-a` + `.slider-b` inputs. Add `data-slider-range` for auto-init. `--pct-a / --pct-b` drive the between-thumbs fill on `.slider-a`.
disabled	.slider	38% opacity + `cursor: not-allowed`. JS skips disabled inputs.
--slider-track-bg / --slider-fill	Token	Unfilled / filled track + thumb. `#2D2D2D` light → `#FFFFFF` dark (full inversion).
--slider-tip-bg / --slider-tip-text	Token	Tooltip pill bg + text. Inverts: dark pill in light mode, white pill + dark text in dark mode.
--slider-ring-hover / --slider-ring-active	Token	Translucent thumb halo: 8 px radius on hover; 14 px on drag. Alpha-black in light, alpha-white in dark.