# Split slider > A value slider whose dark fill carries its label and value, and whose handle parts around the text it meets. A slider for a tool’s panel: a dark, rounded fill grows over a light track, with a thin white handle near its end. Where the fill covers the label or the value they turn white, and when the handle reaches one of them it parts into two dots above and below the text. Drag it past an end and it stretches like a rubber band; every step ticks with a soft synthesised click. A React component by Bruno Delorence: https://brunodelorence.com/components/split-slider. MIT License, Copyright (c) 2026 Bruno Delorence. Category: Inputs. ## Anatomy 1. **Slider**: The whole bar is one `role="slider"`, named by its label: arrows step, Shift or Page Up and Down take ten, Home and End go to the ends. 2. **Track**: A grey well a step off the page. A press anywhere on it brings the fill there; a drag past an end stretches it like a rubber band. 3. **Fill**: A dark rounded bar (a lit grey at night) from the left end to the value, lit along its top edge. It follows on springs, written to CSS variables, without a render per frame. 4. **Label**: Dark on the track and white where the fill covers it: the content is drawn twice, and the white copy is clipped to the fill. 5. **Value**: The number and its unit, in tabular figures, starting where two digits start: a one-digit value keeps a figure space, so it never shifts. 6. **Handle**: A short white line near the fill’s end. Over a text it splits into two dots, above and below it, and closes once past. ## When to use - Tuning one number by feel, where the effect shows as it moves: blur, radius, opacity, zoom. - Stacks of settings in an editor or an inspector, where each row needs its name and its value and little else. - Bounded ranges with a fixed step, from `min` to `max`, read with their unit: `76 px`, `58%`, `−1.5 °C`. - Narrow panels: the label and the value live inside the bar, so a row costs only its height. ## When not to use - Values that must be typed exactly, or ranges too wide to drag to one number. Use a number field, or pair one with the slider. - A low and a high bound at once. Use a range slider with two thumbs. - A few named steps, like Low, Medium, High. A segmented control or a stepped slider names them. - Long labels: the label and the value share one bar, so keep the label to a word or two. - Settings that apply only on Save, where nothing changes as it moves: the drag gives no feedback worth having. ## Installation Install it with the shadcn CLI, into components/split-slider of any React project: ```sh npx shadcn@latest add https://brunodelorence.com/r/split-slider.json ``` Or copy all the source files below into one folder of your project. Either way it needs React 19 and a bundler with CSS Modules (Next.js, Vite). It has a dark colour scheme. Its colours are CSS light-dark() pairs, kept inside @supports so that builds which rewrite light-dark() for older browsers leave them alone: it follows your page’s color-scheme (light unless the page sets one) or its colorScheme prop, with nothing to configure. Browsers without light-dark() show it light. ## Usage ```tsx import { useState } from 'react'; import { SplitSlider, SplitSliderDemo } from './split-slider'; // One slider in your own panel. export function BlurControl() { const [blur, setBlur] = useState(76); return ; } // Or the stage of three, without its demo. export function SliderStage() { return ; } ``` ## States - **At rest**: The handle is a closed line between the label and the value. At rest nothing animates. - **Split by the label**: With the handle over the label, its halves shrink to two dots and the word shows between them. - **Split by the value**: The same split over the number: the part under the fill is white, the rest grey. - **At the minimum**: No fill: the handle waits, dark, at its leftmost place before the label. - **At the maximum**: The fill covers the track and everything on it turns white; the handle, at the value’s end, stays split. - **Stretched past the end**: Held by a drag beyond `max`: the bar grows to the right and thins. Let go, it springs back with a wobble. - **Dark**: With `colorScheme="dark"` (or a dark page) the fill is a lit grey over a dark grey track. ## Examples ### Below zero A frost alert from −10 to 10 °C in half degrees, with a true minus sign below zero. ```tsx import { SplitSlider } from './split-slider'; export function BelowZero() { return (
); } ``` ### Coarse steps A wide zoom slider from 25 to 200% in steps of 25: the fill follows the pointer and settles on the nearest step when let go. ```tsx import { SplitSlider } from './split-slider'; export function CoarseSteps() { return (
); } ``` ### Compact Smaller sliders, 44 px high, for a dense brush panel, with the ticks turned off. ```tsx import { SplitSlider } from './split-slider'; const BRUSH = [ { label: 'Size', value: 40, min: 1, unit: 'px', unitName: 'pixels' }, { label: 'Hardness', value: 75, min: 0, unit: '%', unitName: 'percent' }, { label: 'Flow', value: 50, min: 0, unit: '%', unitName: 'percent' }, { label: 'Smoothing', value: 60, min: 0, unit: '%', unitName: 'percent' }, ]; export function Compact() { return (
{BRUSH.map((setting) => ( ))}
); } ``` ### Colour mixer Hue, saturation and lightness held by the parent, mixing the swatch above as they move. ```tsx 'use client'; import { useState } from 'react'; import { SplitSlider } from './split-slider'; export function ColourMixer() { const [hue, setHue] = useState(204); const [saturation, setSaturation] = useState(48); const [lightness, setLightness] = useState(56); return (
); } ``` ## How it works - The slider is drawn twice: its label, value and handle once in dark on the light track, and once in white on top, clipped with clip-path to the fill’s rounded shape. Wherever the fill reaches, the text turns white, down to half a letter. - The fill’s end, its stretch past either end and a slight thinning are CSS variables. A spring integrated each frame moves them toward the value and stops once it settles, so React renders only when the value changes. - The handle is two halves, each a short bar seen through a clip-path. Near the label or the value the clips shrink to dots at their outer ends: the handle splits a little ahead of a text in the direction it travels, and closes as soon as it is past. The texts’ places are measured once, and again when the slider or its font changes. - Dragged past an end, the slider stretches along a rubber-band curve that gives less and less, up to a third of its height; let go, a lightly damped spring brings it back with a small wobble. - Each step ticks with a click made by the Web Audio API: a short sine that drops in pitch over a burst of filtered noise, lower and quieter as the value falls. One AudioContext serves the page; it is created on the reader’s first press or key, suspended when the ticks stop and closed with the last slider. - Every colour is a light-dark() pair on the root, so the slider takes the page’s color-scheme, or the colorScheme prop. The pairs sit in @supports, where builds that rewrite light-dark() leave them as written, so a page that sets no color-scheme stays light, and so do browsers without light-dark(). At night the fill is a lit grey over a dark grey track. ## API reference - **label** (`string`): The visible label, which also names the slider for screen readers. Required. - **value** (`number`): The value, when the parent holds it (with onChange). - **defaultValue** (`number`, default `50`): The value to start from when the slider holds its own. - **onChange** (`(value: number) => void`): Called with each new value, as it is dragged or stepped. - **min** (`number`, default `0`): The lowest value. - **max** (`number`, default `100`): The highest value. - **step** (`number`, default `1`): The step of a drag and of the arrow keys; Page Up and Page Down take ten. - **unit** (`string`, default `'px'`): Shown after the value; a percent sign sits against the number. - **unitName** (`string`, default `'pixels'`): The unit as screen readers say it: “76 pixels”. - **sound** (`boolean`, default `true`): Ticks on each step, once the reader has pressed or keyed the slider. - **height** (`number`, default `58`): Its height in px; its text, corners and handle scale with it. - **ref** (`Ref`): Drives the slider as a pointer would (press, drag, release); the demo uses it. - **colorScheme** (`'light' | 'dark' | 'system'`): Its colours: light, dark, or the reader’s system setting. Without it the component follows the page’s color-scheme, which is light unless the page sets one. - **className** (`string`): Extra class for the slider’s root. - **autoplay** (`boolean`, default `true`): On SplitSliderDemo, the stage of three sliders (which takes className too): while on screen and untouched, a ghost pointer drags the sliders now and then. ## Accessibility - Each slider is a role="slider" named by its label, with aria-valuenow and an aria-valuetext that speaks its unit (“76 pixels”). The two drawn copies of the text and the handle are aria-hidden, so the value is heard once. - The arrow keys step (Shift for ten steps), Page Up and Page Down take ten, Home and End go to the ends, and the focus ring follows the slider’s rounded shape. - The click is never the only feedback. It starts only after the reader’s own press or key, never plays for the demo, and the mute button (a toggle with aria-pressed) silences it. - On a phone a vertical swipe still scrolls the page. Under reduced motion there is no demo, no spring and no stretch: the fill moves straight to its value. ## Source ### split-slider/split-slider.tsx ```tsx // Copyright (c) 2026 Bruno Delorence. MIT License. 'use client'; import { useEffect, useImperativeHandle, useLayoutEffect, useRef, useState, type CSSProperties, type FocusEvent, type KeyboardEvent, type PointerEvent, type Ref, } from 'react'; import { clickSound, type ClickSound } from './click-sound'; import { GhostPointer, runDemo, type Point } from './ghost-pointer'; import { useAutoplay } from './use-autoplay'; import styles from './split-slider.module.css'; /* * Split slider: a value slider whose dark fill carries its label, a thin handle and, as it grows, * its value. * * - The fill is a rounded bar that grows from the left, with the handle, a short white line, near * its right end. The label and the value sit on the track; where the fill covers them they turn * white. The slider's content is drawn twice, dark on the track and light on top, and the light * copy is clipped to the fill's shape. * - When the handle comes to a text, it splits: its halves shrink into two dots, above and below * the text, and let it show between them. It splits a little ahead of the text in the direction * it moves, and closes as soon as it is past. * - Dragged past either end, the slider stretches like a rubber band, and springs back when let go. * - Each step ticks: a soft click synthesised with the Web Audio API (click-sound.ts), lower and * quieter as the value falls. Sound starts with the reader's first press or key. * - The fill follows the value on springs integrated frame by frame and written to CSS variables, * without a render per frame. At rest, nothing runs. * - It is a role="slider": arrow keys, Page Up and Down, Home and End. * - Its colours are light-dark() pairs in the stylesheet: it follows the page's color-scheme, or * the one its colorScheme prop sets. At night the fill is a lit grey over a dark grey track. * * Below it, SplitSliderDemo: three of them on a white stage (near-black at night), dragged now and * then by a ghost pointer. */ /** Where the handle sits, as shares of the slider's height (the stylesheet gets them as variables). */ const GEOMETRY = { /** From the fill's end back to the handle. */ inset: 0.31, /** The handle's leftmost place, where it stays as the fill runs out. */ start: 0.217, }; /** How near a text the handle splits, as shares of the height: ahead of its move, and behind. */ const AHEAD = 0.25; const BEHIND = 0.08; /** The most a drag past an end stretches the slider, as a share of its height. */ const STRETCH = 0.32; /** How much a stretch thins the slider, for its share of the width. */ const THIN = 0.6; /** The springs, as [stiffness, damping] per second. */ const FOLLOW = [1400, 75] as const; // under a pointer: close behind it const GLIDE = [380, 39] as const; // to a value set by a key or a tap const SNAP = [520, 17] as const; // a stretch let go: a rubber band's wobble /** How far a touch moves sideways before it drags, in px. Up or down first, the page scrolls. */ const DRAG_START = 4; /** Drives a slider as a pointer would, without a sound or an announcement (the demo uses it). */ export type SplitSliderHandle = { /** Where the handle is on the screen. */ handlePoint: () => Point; /** Where a pointer holding the handle would be with the slider at `value` (past an end too). */ pointFor: (value: number) => Point; /** Presses at `clientX`, a point on the screen. */ press: (clientX: number) => void; /** Moves the press to `clientX`. */ drag: (clientX: number) => void; /** Lets go. */ release: () => void; }; type Span = { left: number; right: number }; /** The slider's size and its texts' places, in its own px (before any scaling). */ type Box = { width: number; height: number; label: Span; value: Span }; type Press = { pointerId: number; startX: number; startY: number; /** From the press to the fill's end, kept while it drags: a press on the handle takes it there. */ offset: number; /** The slider's place on the screen when pressed. */ rect: DOMRect; /** Past DRAG_START (at once, for a mouse): the press drags. */ dragging: boolean; /** The demo's press: silent. */ demo: boolean; }; /** Where the fill and its stretches are, and how fast they move. */ type Motion = { /** The fill's end, as a share of the width, and where it goes. */ p: number; pSpeed: number; target: number; /** The stretch past the right end and past the left one, in px, and what the pointer asks. */ over: number; overSpeed: number; overPull: number; under: number; underSpeed: number; underPull: number; /** A pointer holds the fill. */ held: boolean; /** Which way the value last moved the fill (a stretch springing back does not count). */ heading: 1 | -1; /** The fill's end when last drawn, for the heading. */ drawnP: number; /** The handle's place, in px from the left end, and whether it is split. */ handleX: number; split: boolean; time: number; }; /** A drag's stretch past an end: it gives less and less, up to STRETCH of the height. */ const rubber = (distance: number, height: number) => { const most = STRETCH * height; return distance <= 0 ? 0 : (most * distance) / (distance + most * 2.2); }; const reducedMotion = () => window.matchMedia('(prefers-reduced-motion: reduce)').matches; export function SplitSlider({ label, value: controlled, defaultValue = 50, onChange, min = 0, max = 100, step = 1, unit = 'px', unitName = 'pixels', sound = true, height, colorScheme, ref, className = '', }: { /** The visible label, which also names the slider for screen readers. */ label: string; /** The value, when the parent holds it (with `onChange`). */ value?: number; /** The value to start from when the slider holds its own. */ defaultValue?: number; /** Called with each new value, as it is dragged or stepped. */ onChange?: (value: number) => void; /** The lowest value. */ min?: number; /** The highest value. */ max?: number; /** The step of a drag and of the arrow keys; Page Up and Page Down take ten. */ step?: number; /** Shown after the value: px, %. */ unit?: string; /** The unit as screen readers say it: "76 pixels". */ unitName?: string; /** Ticks on each step, once the reader has pressed or keyed the slider. */ sound?: boolean; /** Its height in px, 58 by default; its text, corners and handle scale with it. */ height?: number; /** Its colours: light, dark, or the reader's system setting. Unset, it follows the page's. */ colorScheme?: 'light' | 'dark' | 'system'; /** Drives the slider as a pointer would; the demo uses it. */ ref?: Ref; /** Extra class for the slider's root. */ className?: string; }) { const range = max - min || 1; const snap = (raw: number) => Math.min(max, Math.max(min, Number((min + Math.round((raw - min) / step) * step).toFixed(6)))); const shareOf = (n: number) => (n - min) / range; const [own, setOwn] = useState(() => snap(defaultValue)); const value = controlled === undefined ? own : snap(controlled); const [dragging, setDragging] = useState(false); // The fill's place as the server draws it; after that, the springs write `--p` themselves. const [initial] = useState(() => shareOf(value)); const root = useRef(null); const labelText = useRef(null); const valueText = useRef(null); const clicks = useRef(null); const press = useRef(null); const frame = useRef(0); const latest = useRef(value); const box = useRef({ width: 1, height: 1, label: { left: 0, right: 0 }, value: { left: 0, right: 0 }, }); const motion = useRef({ p: initial, pSpeed: 0, target: initial, over: 0, overSpeed: 0, overPull: 0, under: 0, underSpeed: 0, underPull: 0, held: false, heading: -1, drawnP: initial, handleX: 0, split: false, time: 0, }); /** Writes the fill, its stretch and the handle, and splits the handle by a text. */ const draw = () => { const element = root.current; if (!element) return; const m = motion.current; const { width, height, label: around, value: beside } = box.current; element.style.setProperty('--p', m.p.toFixed(5)); element.style.setProperty('--over', `${m.over.toFixed(2)}px`); element.style.setProperty('--under', `${m.under.toFixed(2)}px`); const thin = ((Math.abs(m.over) + Math.abs(m.under)) / width) * THIN; element.style.setProperty('--squash', (1 - thin).toFixed(4)); // The handle, where the stylesheet draws it, and which way the value moves it. const inset = GEOMETRY.inset * height; const start = GEOMETRY.start * height; m.handleX = Math.max(m.p * width + m.over - inset, start) - m.under; if (Math.abs(m.p - m.drawnP) * width > 0.05) m.heading = m.p > m.drawnP ? 1 : -1; m.drawnP = m.p; // Whether it splits goes by the value alone: a stretch only takes it away from the texts. const x = Math.max(m.p * width - inset, start); const ahead = AHEAD * height; const behind = BEHIND * height; const near = ({ left, right }: Span) => right > left && x > left - (m.heading > 0 ? ahead : behind) && x < right + (m.heading > 0 ? behind : ahead); const split = near(around) || near(beside); if (split !== m.split) { m.split = split; element.toggleAttribute('data-split', split); } }; /** Runs the springs frame by frame until the fill and its stretches are at rest. */ const animate = () => { if (frame.current) return; const m = motion.current; const resting = m.p === m.target && m.over === m.overPull && m.under === m.underPull && !m.pSpeed && !m.overSpeed && !m.underSpeed; if (resting) return draw(); m.time = performance.now(); const tick = (now: number) => { // Two half steps per frame, and never more than two frames' worth after a stall. const dt = Math.max(0, Math.min(0.034, (now - m.time) / 1000)) / 2; m.time = now; const [ks, cs] = m.held ? FOLLOW : GLIDE; const [kr, cr] = m.held ? FOLLOW : SNAP; for (let i = 0; i < 2; i += 1) { m.pSpeed += (ks * (m.target - m.p) - cs * m.pSpeed) * dt; m.p += m.pSpeed * dt; m.overSpeed += (kr * (m.overPull - m.over) - cr * m.overSpeed) * dt; m.over += m.overSpeed * dt; m.underSpeed += (kr * (m.underPull - m.under) - cr * m.underSpeed) * dt; m.under += m.underSpeed * dt; } let rest = true; if (Math.abs(m.target - m.p) < 0.0001 && Math.abs(m.pSpeed) < 0.001) { m.p = m.target; m.pSpeed = 0; } else rest = false; if (Math.abs(m.overPull - m.over) < 0.05 && Math.abs(m.overSpeed) < 0.5) { m.over = m.overPull; m.overSpeed = 0; } else rest = false; if (Math.abs(m.underPull - m.under) < 0.05 && Math.abs(m.underSpeed) < 0.5) { m.under = m.underPull; m.underSpeed = 0; } else rest = false; draw(); frame.current = rest ? 0 : requestAnimationFrame(tick); }; frame.current = requestAnimationFrame(tick); }; /** Moves the fill to `share` of the width: on its springs, or at once under reduced motion. */ const moveTo = (share: number, pull: { over: number; under: number } = { over: 0, under: 0 }) => { const m = motion.current; m.target = share; m.overPull = pull.over; m.underPull = pull.under; if (reducedMotion()) { cancelAnimationFrame(frame.current); frame.current = 0; Object.assign(m, { p: share, pSpeed: 0, over: 0, overSpeed: 0, under: 0, underSpeed: 0 }); draw(); } else animate(); }; /** Takes a new value; the reader's own steps tick. */ const commit = (next: number, byReader: boolean) => { if (next === latest.current) return; latest.current = next; if (controlled === undefined) setOwn(next); onChange?.(next); if (byReader && sound) clicks.current?.play(shareOf(next)); }; /** Measures the slider and where its texts are (they set where the handle splits). */ const measure = () => { const element = root.current; const around = labelText.current; const beside = valueText.current; if (!element || !around || !beside) return; box.current = { width: element.offsetWidth || 1, height: element.offsetHeight || 1, label: { left: around.offsetLeft, right: around.offsetLeft + around.offsetWidth }, value: { left: beside.offsetLeft, right: beside.offsetLeft + beside.offsetWidth }, }; draw(); }; // The press's pointer, on the screen, to the fill's end it asks for and the value there. const follow = (clientX: number, byReader: boolean) => { const current = press.current; if (!current) return; const { width, height } = box.current; const scale = current.rect.width / width || 1; const x = (clientX + current.offset - current.rect.left) / scale; const still = reducedMotion(); moveTo(Math.min(1, Math.max(0, x / width)), { over: still ? 0 : rubber(x - width, height), under: still ? 0 : rubber(-x, height), }); commit(snap(min + (x / width) * range), byReader); }; /** A press begins: on the handle it takes it where it is, elsewhere the fill comes to it. */ const begin = (pointerId: number, clientX: number, clientY: number, demo: boolean) => { const element = root.current; if (!element) return; const rect = element.getBoundingClientRect(); const { width, height } = box.current; const scale = rect.width / width || 1; const m = motion.current; const end = rect.left + (m.p * width + m.over - m.under) * scale; const handle = rect.left + m.handleX * scale; const onHandle = clientX > handle - height * 0.3 * scale && clientX < end + height * 0.2 * scale; press.current = { pointerId, startX: clientX, startY: clientY, offset: onHandle ? end - clientX : 0, rect, dragging: false, demo, }; }; /** The press drags from now on: the fill follows it closely. */ const startDrag = (clientX: number, byReader: boolean) => { const current = press.current; if (!current) return; current.dragging = true; motion.current.held = true; setDragging(true); follow(clientX, byReader); }; /** The press ends: the stretches spring back, the fill settles on the value. */ const finish = () => { if (!press.current) return; press.current = null; motion.current.held = false; setDragging(false); moveTo(shareOf(latest.current)); }; useImperativeHandle(ref, () => { const point = (x: number): Point => { const element = root.current; if (!element) return { x: 0, y: 0 }; const rect = element.getBoundingClientRect(); const scale = rect.width / box.current.width || 1; return { x: rect.left + x * scale, y: rect.top + rect.height / 2 }; }; return { handlePoint: () => point(motion.current.handleX), pointFor: (target) => { const { width, height } = box.current; return point(((target - min) / range) * width - GEOMETRY.inset * height); }, press: (clientX) => { if (press.current) return; begin(-1, clientX, 0, true); startDrag(clientX, false); }, drag: (clientX) => { if (press.current?.demo) follow(clientX, false); }, release: () => { if (press.current?.demo) finish(); }, }; }); // The sound, the measures, and their updates when the slider or its font changes. useEffect(() => { clicks.current = clickSound(); const element = root.current; let alive = true; const observer = new ResizeObserver(() => measure()); if (element) observer.observe(element); void document.fonts.ready.then(() => { if (alive) measure(); }); return () => { alive = false; observer.disconnect(); cancelAnimationFrame(frame.current); frame.current = 0; clicks.current?.dispose(); clicks.current = null; }; // The measures read the elements, which stay the same. // eslint-disable-next-line react-hooks/exhaustive-deps }, []); // A value from the parent (or a key) moves the fill, unless a pointer holds it. const shown = String(value).replace('-', '\u2212'); useLayoutEffect(() => { latest.current = value; if (!motion.current.held) moveTo(shareOf(value)); // eslint-disable-next-line react-hooks/exhaustive-deps }, [value]); // A value with more or fewer digits is wider: measure the text again. useLayoutEffect(() => { measure(); // eslint-disable-next-line react-hooks/exhaustive-deps }, [shown.length]); const onPointerDown = (event: PointerEvent) => { if (event.button !== 0) return; // A reader's press drops one the demo was making. if (press.current?.demo) finish(); if (press.current) return; if (sound) clicks.current?.unlock(); begin(event.pointerId, event.clientX, event.clientY, false); if (event.pointerType === 'mouse') { event.currentTarget.setPointerCapture(event.pointerId); startDrag(event.clientX, true); } }; const onPointerMove = (event: PointerEvent) => { const current = press.current; if (!current || current.pointerId !== event.pointerId) return; if (!current.dragging) { const dx = event.clientX - current.startX; const dy = event.clientY - current.startY; // Up or down first: the page scrolls. if (Math.abs(dy) > DRAG_START && Math.abs(dy) > Math.abs(dx)) { press.current = null; return; } if (Math.abs(dx) < DRAG_START) return; event.currentTarget.setPointerCapture(event.pointerId); startDrag(event.clientX, true); return; } follow(event.clientX, true); }; const onPointerUp = (event: PointerEvent) => { const current = press.current; if (!current || current.pointerId !== event.pointerId) return; // A tap: the fill comes to it. if (!current.dragging) follow(event.clientX, true); // A touch counts as a gesture that may start sound only once it lifts. if (sound) clicks.current?.unlock(); finish(); }; const onKeyDown = (event: KeyboardEvent) => { const big = step * 10; const moves: Partial> = { ArrowRight: value + (event.shiftKey ? big : step), ArrowUp: value + (event.shiftKey ? big : step), ArrowLeft: value - (event.shiftKey ? big : step), ArrowDown: value - (event.shiftKey ? big : step), PageUp: value + big, PageDown: value - big, Home: min, End: max, }; const next = moves[event.key]; if (next === undefined) return; event.preventDefault(); if (sound) clicks.current?.unlock(); commit(snap(next), true); }; // A one-digit value keeps a digit's room (a figure space), so it ends where two digits end. Below // zero, a true minus sign (a digit wide) takes that room: −5 ends where 5 does. const figure = shown.length < 2 ? '\u2007'.repeat(2 - shown.length) + shown : shown; const content = (copy: 'base' | 'ink') => (