Wake slider

A thumbless range slider of thin bars where drag speed raises a cosine wake behind the handle.

New

64%

Drag across the bars quickly and a wake lifts behind the handle. Signal at 64%.

Implementation

1"use client";2 3import {4  useCallback,5  useEffect,6  useRef,7  useState,8  type CSSProperties,9  type KeyboardEvent,10  type PointerEvent as ReactPointerEvent,11} from "react";12 13export interface WakeSliderProps {14  value?: number;15  defaultValue?: number;16  onChange?: (value: number) => void;17  min?: number;18  max?: number;19  step?: number;20  bars?: number;21  height?: number;22  restHeight?: number;23  gap?: number;24  fillColor?: string;25  trackColor?: string;26  crestColor?: string;27  sensitivity?: number;28  reach?: number;