Slider

1/* Deepak Kumar E — https://craft.iam-deepak.space */2 3import { useCallback, useId, useState } from "react";4 5/**6 * A range slider with a value that travels with the thumb.7 *8 * Still a real input[type=range] underneath, kept transparent and fully9 * interactive with the visible track drawn behind it — the opposite of the10 * usual div-with-pointer-handlers approach. That is why it has arrow keys,11 * Page Up/Down, Home/End, screen-reader announcements and form participation12 * without any of it being reimplemented. Hand-rolled sliders re-derive that13 * behaviour and most stop at drag.14 *15 * Two details do the visual work:16 *17 * The thumb is inset by half its own width as the value moves, so at 0% and18 * 100% it sits flush inside the track instead of hanging over the ends. A19 * plain `left: percent` overhangs by half a thumb at both extremes — small,20 * and precisely where people look when checking a slider is at its limit.21 *22 * The fill is a gradient colour stop rather than a scaled child, so the23 * coloured portion always ends exactly at the thumb centre. A scaled element24 * drifts against the thumb for the same reason.25 */26 27export interface SliderProps {28  label: string;29  min?: number;30  max?: number;31  step?: number;32  value?: number;33  defaultValue?: number;34  onChange?: (value: number) => void;35  /** Formats the displayed value — units, percentages, currency. */36  format?: (value: number) => string;37  accent?: string;38  size?: "sm" | "md" | "lg";39  /** Show notches at each step. Ignored when the steps would be denser than ~2px. */40  ticks?: boolean;41  /** Keep the value bubble visible rather than only while active. */42  alwaysShowValue?: boolean;43  still?: boolean;44  className?: string;45}46 47const SIZES = {48  sm: { track: 6, thumb: 16, row: 28 },49  md: { track: 10, thumb: 22, row: 36 },50  lg: { track: 16, thumb: 30, row: 46 },51} as const;52 53export function Slider({54  label,55  min = 0,56  max = 100,57  step = 1,58  value,59  defaultValue = 50,60  onChange,61  format,62  accent = "#c3f53c",63  size = "md",64  ticks = false,65  alwaysShowValue = false,66  still = false,67  className = "",68}: SliderProps) {69  const id = useId();70  const [internal, setInternal] = useState(defaultValue);71  const current = value ?? internal;72  const [active, setActive] = useState(false);73 74  const dims = SIZES[size];75 76  const set = useCallback(77    (next: number) => {78      if (value === undefined) setInternal(next);79      onChange?.(next);80    },81    [value, onChange],82  );83 84  const span = max - min || 1;85  const fraction = Math.max(0, Math.min(1, (current - min) / span));86  const percent = fraction * 100;87 88  /* Inset by half a thumb as the value travels, so the thumb sits flush inside89     the track at both ends rather than overhanging it. */90  const thumbLeft = `calc(${percent}% + ${(0.5 - fraction) * dims.thumb}px)`;91 92  const stepCount = Math.round(span / step);93  const showTicks = ticks && stepCount > 1 && stepCount <= 40;94 95  const display = format ? format(current) : String(current);96  const revealed = alwaysShowValue || active;97 98  return (99    <div className={`w-full ${className}`}>100      <div className="mb-3 flex items-baseline justify-between gap-4">101        <label102          htmlFor={id}103          className="font-mono text-micro tracking-[0.14em] text-bone-400 uppercase"104        >105          {label}106        </label>107        {/* The static readout stays for screen readers and for when the bubble108            is hidden; it is the one that is always correct. */}109        <output110          htmlFor={id}111          className="font-mono text-micro tabular-nums transition-opacity"112          style={{ color: accent, opacity: revealed ? 0.35 : 1 }}113        >114          {display}115        </output>116      </div>117 118      <div className="relative" style={{ height: dims.row }}>119        {/* Value bubble, travelling with the thumb. */}120        <div121          aria-hidden122          className="pointer-events-none absolute -translate-x-1/2 rounded-md px-2 py-1 font-mono text-[0.7rem] tabular-nums whitespace-nowrap"123          style={{124            left: thumbLeft,125            bottom: `calc(50% + ${dims.thumb / 2 + 8}px)`,126            background: accent,127            color: "#0a0b0e",128            opacity: revealed ? 1 : 0,129            transform: `translate(-50%, ${revealed ? 0 : 4}px)`,130            transition: still ? "none" : "opacity 160ms linear, transform 160ms cubic-bezier(0.16,1,0.3,1)",131          }}132        >133          {display}134        </div>135 136        {/* Track and fill in one gradient, so the boundary lands exactly at the137            thumb centre at every value. */}138        <div139          aria-hidden140          className="absolute top-1/2 left-0 w-full -translate-y-1/2 overflow-hidden rounded-full"141          style={{142            height: dims.track,143            background: `linear-gradient(to right, ${accent} 0%, ${accent} ${percent}%, var(--color-ink-600) ${percent}%, var(--color-ink-600) 100%)`,144          }}145        >146          {showTicks ? (147            <div className="flex h-full w-full items-center justify-between px-[6px]">148              {Array.from({ length: stepCount + 1 }, (_, i) => (149                <span150                  key={i}151                  className="w-px"152                  style={{153                    height: dims.track * 0.45,154                    // Notches invert over the fill so they stay legible on155                    // both sides of the boundary.156                    background:157                      i / stepCount <= fraction158                        ? "rgba(10,11,14,0.45)"159                        : "rgba(255,255,255,0.16)",160                  }}161                />162              ))}163            </div>164          ) : null}165        </div>166 167        <div168          aria-hidden169          className="pointer-events-none absolute top-1/2 rounded-full"170          style={{171            left: thumbLeft,172            width: dims.thumb,173            height: dims.thumb,174            background: "var(--color-ink-900)",175            border: `2px solid ${accent}`,176            boxShadow: active ? `0 0 0 6px ${accent}22` : "0 1px 6px rgba(0,0,0,0.5)",177            transform: `translate(-50%, -50%) scale(${active ? 1.12 : 1})`,178            transition: still179              ? "none"180              : "transform 180ms cubic-bezier(0.16,1,0.3,1), box-shadow 180ms linear",181          }}182        >183          {/* A small core, so the thumb reads as an object rather than a ring. */}184          <span185            className="absolute top-1/2 left-1/2 rounded-full"186            style={{187              width: dims.thumb * 0.28,188              height: dims.thumb * 0.28,189              background: accent,190              transform: "translate(-50%, -50%)",191            }}192          />193        </div>194 195        {/*196          The real control. Transparent rather than display:none — hiding it197          would take the keyboard behaviour and the accessibility tree with it.198        */}199        <input200          id={id}201          type="range"202          min={min}203          max={max}204          step={step}205          value={current}206          onChange={(e) => set(Number(e.target.value))}207          onPointerDown={() => setActive(true)}208          onPointerUp={() => setActive(false)}209          onPointerCancel={() => setActive(false)}210          // Focus counts as active too, so a keyboard user gets the same211          // readout a dragging user does.212          onFocus={() => setActive(true)}213          onBlur={() => setActive(false)}214          onPointerEnter={() => setActive(true)}215          onPointerLeave={(e) => {216            if (e.buttons === 0 && document.activeElement !== e.currentTarget) {217              setActive(false);218            }219          }}220          className="absolute inset-0 h-full w-full cursor-pointer opacity-0"221        />222      </div>223    </div>224  );225}226