Knob Slider

A radial dial component with tactile feedback. It shows a value with sliding digits and blur animations. It updates when dragged or clicked. Use it for interactive input controls.

byWatermelon Corp from Watermelon

Installation

terminal

pnpm dlx layro-cli add @watermeloncorp/knob-slider

npx layro-cli add @watermeloncorp/knob-slider

npx layro-cli add @watermeloncorp/knob-slider

bunx layro-cli add @watermeloncorp/knob-slider

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

Code

Demo

"use client";

import React, {
    useState,
    useRef,
    useEffect,
    useCallback,
    useMemo,
    useId,
} from "react";
import {
    motion,
    MotionValue,
    useSpring,