Kit part · Sliders & faders

Fader

A continuous value along a line: a native range whose cap rides in a slot cut into the plate, with a printed scale.

Element: <input type="range">
Needs: kit.css
Rules: fader.rules.md · 3
Finishes: Aluminium · Graphite · Porcelain · Black
Volumes: Tactile · Quiet

On this page

Variants
Every state, at once
API
Markup
Accessibility
How it’s built
Rules
Related parts

Variants

Horizontal with scale

Ch 4

Vertical · channels

Every state, at once

Both finishes, side by side. Hover, pressed and focus are forced with .is-hover, .is-down and .is-focus; checked and disabled are real.

Aluminium

Part	Low	Middle	High	Focus
Horizontal
Vertical

Graphite

Part	Low	Middle	High	Focus
Horizontal
Vertical

API

Name	Kind	Values	What it does
.tui-fader	class	on <input type="range">	A 6px slot and a 16 × 28 cap with a printed line across it.
.tui-fader--v	class	—	Vertical, 140px tall, bottom is minimum (writing-mode, not rotation).
.tui-scale	class	on <div>	Printed ticks every 10%, a longer one at each end. Put it right under a horizontal fader.
min · max · step · value	attribute	0 · 100 · 1 · 50	Native. Make the step what the value can really be.
input · change	event	—	Native: input while moving, change on release.
Arrows · PageUp/PageDown · Home/End	keyboard	—	Native range behaviour.

Markup

<div class="tui-control">
  <input class="tui-fader tui-fader--v" type="range" min="0" max="100" value="70" aria-label="Channel 1">
  <span class="tui-label">Ch 1</span>
  <output>70</output>
</div>

<label class="tui-field">
  <span class="tui-label">Crossfade</span>
  <input class="tui-fader" type="range" min="-50" max="50" value="0">
</label>
<div class="tui-scale"></div>

Needs kit.css only, no script. How to install the kit.

Name it with a label or aria-label; show the value beside or under it in tabular figures.
For values with units, set aria-valuetext (“−6 dB”) as it moves; the native range only announces the number.
The focus ring draws on the cap.

How it’s built

A native range with its track and thumb styled through the WebKit and Mozilla pseudo-elements. The slot is the well fill with a short inset shadow; the cap is a horizontal gradient that rounds its sides, a 1.5px line of --tui-ink across its middle, and a skirt. The vertical version uses writing-mode: vertical-lr so it stays a real, accessible range. The scale is two repeating gradients.

Rules

fader.rules.mdIn the brain

Channels stand upright; balance and crossfade lie flat. Never step finer than the value really moves.

3 rules in this file, with the foundations they rest on and the anti-patterns that break them. Full rules ship in the brain with the Pass.

See the Founder Pass How agents use the brain