Docs/Scrub Input

Scrub Input

An interactive inline slider component styled as a pill, allowing users to scrub values smoothly. Modeled after modern design tool interfaces.

Installation

$pnpm dlx shadcn@latest add @componentry/scrub-input

Usage

API Reference

PropTypeDefault
labelText label displayed inside the component.
string""
valueThe controlled value of the scrub input.
numberundefined
defaultValueThe initial value when uncontrolled.
number0
onChangeCallback fired when the value changes.
(value: number) => voidundefined
minThe minimum allowed value.
number0
maxThe maximum allowed value.
number100
stepThe granularity of the variable adjustments.
number1

Click on the icon in the top right of the example preview to view the source code for specific variants.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Have any questions?
Contact on@harshjdhv
Opacity44
import { useState } from "react";
import { ScrubInput } from "@/components/ui/scrub-input";

export function Demo() {
  const [opacity, setOpacity] = useState(44);

  return (
    <ScrubInput 
      label="Opacity" 
      value={opacity} 
      onChange={setOpacity} 
      min={0} 
      max={100} 
    />
  );
}