Switch-to-Slider Morph

A setting that is first switched on and then tuned needs only one thumb. While off, the thumb sits in the switch; press it and the slider track unfolds while the thumb springs across, growing slightly mid-flight as if it leapt, lands on min and then counts up to the current value. Once on, drag the thumb or click the track to adjust, and a value bubble with rolling digits follows the thumb while you drag; press the switch again and the thumb flies back before the track folds away. The on/off state and the value each support controlled and uncontrolled modes, and the slider can be vertical or horizontal.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<SwitchToSliderMorph/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/switch-to-slider-morph.en.json

Usage

import { SwitchToSliderMorph } from "@/components/ui/switch-to-slider-morph";

const [on, setOn] = React.useState(false);
const [level, setLevel] = React.useState(72);

<SwitchToSliderMorph
  label="Focus mode"
  enabled={on}
  onEnabledChange={setOn}
  value={level}
  onValueChange={setLevel}
  valueLabel={(v) => `Noise ${v}%`}
/>

Props

How it works

• Shared thumb: the thumb in the switch and the thumb on the slider are the same motion layoutId (inside a LayoutGroup), so toggling springs it from the old place to the new one. Layout animation travels in a straight line, so an extra 1 → 1.2 → 1 scale mid-flight makes it read as a leap.
• The slider track unfolds with clip-path rather than a real height change — the thumb's landing spot is measured during render, and a zero-size track would send it to the wrong place. When turning off, the track waits about 200ms before folding so the thumb flies home first.
• Dragging moves the thumb with a transform offset, which does not trigger layout animation, so it tracks the pointer without lag; setPointerCapture keeps tracking even outside the track, and clicking anywhere on the track jumps to that value.
• The count-up only happens at the moment of enabling and only when the value is above min; dragging or a key press stops it immediately.
• CSS variables: --wb-knob-slider-accent (default #3b82f6, switch and fill colour), --wb-knob-slider-expand (default 220ms, track unfold duration), --wb-knob-slider-count (default 600ms, count-up duration).

Accessibility

• The switch is a role="switch" button with aria-checked; the slider thumb is role="slider" with aria-valuenow / aria-valuemin / aria-valuemax / aria-orientation, and aria-valuetext uses the output of valueLabel
• Both point at label through aria-labelledby; while off, the slider track is hidden from assistive technology
• Keyboard: arrow keys ±step, PageUp / PageDown ±10 steps, Home / End jump to min / max; the switch and the thumb both show a focus-visible ring
• Turning it on with the switch moves focus to the slider thumb, turning it off returns focus to the switch; controlled changes from outside never steal focus
• The value bubble and the readout next to the label are visual only (aria-hidden); semantics come from aria-valuetext
• When the user's system has reduce motion turned on, the thumb does not leap or count — it fades in at its new place over 120ms, and the track fades instead of unfolding