Scrubber

A slider with an animated thumb and label. It shows a track with a fill indicator and optional ticks. It responds to pointer and keyboard input. Use for adjusting values in a design-tool style interface.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/scrubber

npx layro-cli add @educlopez/scrubber

npx layro-cli add @educlopez/scrubber

bunx layro-cli add @educlopez/scrubber

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import { motion, useReducedMotion } from "motion/react";
import { useCallback, useEffect, useRef, useState } from "react";

export interface ScrubberProps {
  /** Additional CSS classes */
  className?: string;
  /** Number of decimal places to display */
  decimals?: number;
  /** Default value for uncontrolled usage */
  defaultValue?: number;
  /** Label displayed on the left side of the track */