Detent Slider

This is a small fold control with magnet ends. Drag toward open or closed and the thumb seats itself.

Drag to open and close

'use client';

import { useState } from 'react';

import {
  DetentSliderLabel,
  DetentSliderRoot,
  DetentSliderThumb,
  DetentSliderTrack
} from './detent-slider';

const DetentSlider = Object.assign(DetentSliderRoot, {
  Label: DetentSliderLabel,
  Root: DetentSliderRoot,
  Thumb: DetentSliderThumb,
  Track: DetentSliderTrack
});

const DEVICE_ARIA = {
  '0': 'Device folded, compact cover display',
  '1': 'Device unfolded, continuous inner display',
  default: 'Device partially unfolded'
} as const;

const fmt = (n: number) => n.toFixed(3);

export const DetentSliderPreview = () => {
  const [sim, setSim] = useState({
    position: 0,
    stretchMax: 0.8,
    stretchPosition: 0
  });

  return (
    <div className="flex w-full flex-col items-center justify-center gap-10 py-8">
      <div
        aria-hidden
        className="text-muted-foreground flex w-full max-w-md flex-wrap justify-center gap-x-6 gap-y-3 text-xs tabular-nums"
      >
        <div className="inline-flex items-baseline gap-2">
          <span className="tracking-[0.01em]">position</span>
          <span className="text-foreground font-mono">{fmt(sim.position)}</span>
        </div>
        <div className="inline-flex items-baseline gap-2">
          <span className="tracking-[0.01em]">stretchPosition</span>
          <span className="text-foreground font-mono">{fmt(sim.stretchPosition)}</span>
        </div>
      </div>
      <DetentSlider
        ariaValueText={DEVICE_ARIA}
        className="w-full max-w-md"
        defaultValue={0}
        onSimulationUpdate={setSim}
      >
        <DetentSlider.Label>Drag to open and close</DetentSlider.Label>
        <DetentSlider.Track>
          <DetentSlider.Thumb />
        </DetentSlider.Track>
      </DetentSlider>
    </div>
  );
};

How to use

pnpm add react-aria-components tailwind-variants

The lab ships as a compound control: Root, Label, Track, Thumb. React Aria owns focus and the hidden range input. A magnet simulator owns drag feel and paints transform plus stretch CSS variables on the thumb. Keyboard arrows step 0 → 0.5 → 1 through the same sim path.

Wire it with a label and track, pass ariaValueText if you want spoken names near the ends, and listen to onSimulationUpdate only when you need a live preview. Prefer not to setState every frame outside the lab.

Inspired by

iPhone Duo