Fractional Picker

A draggable horizontal ruler for selecting numeric values with smooth snapping. It shows numbered items and reacts to drag gestures. Use it for precise numeric input in forms or settings.

byWatermelon Corp from Watermelon

Installation

terminal

pnpm dlx layro-cli add @watermeloncorp/fractional-picker

npx layro-cli add @watermeloncorp/fractional-picker

npx layro-cli add @watermeloncorp/fractional-picker

bunx layro-cli add @watermeloncorp/fractional-picker

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

Code

Demo

'use client';

import { useEffect, useLayoutEffect, useRef, useState } from 'react';
import {
  motion,
  useMotionValue,
  useTransform,
  animate,
  MotionValue,
} from 'framer-motion';
import { cn } from '@/lib/utils';

interface RulerItemProps {
  value: number;