Nexus UI

Tick Slider, animated React component

A value slider drawn as a row of fine tick marks that fill as you drag, swell into a soft wave under the pointer and read out a rolling number.

  • Free
  • Inputs & Controls
  • Spring
  • Hover

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

Props

PropTypeDefaultWhat it does
valuenumber—Controlled value.
defaultValuenumber50Starting value when uncontrolled.
onChange(value: number) => void—Called with the snapped value while dragging and on key presses.
onCommit(value: number) => void—Called once when a drag or key press settles.
minnumber0Lowest value.
maxnumber100Highest value.
stepnumber1Values snap to multiples of this.
ticksnumber36How many tick marks the track is drawn with.
labelstring—Visible label above the track, also used as the accessible name.
accentstring—Colour of the filled ticks and the number. Defaults to the text colour.
size"sm" | "md" | "lg""md"Tick height and number size.
showValuebooleantrueShow the rolling number beside the track.
unitstring—Suffix after the number, e.g. "%".
magnifynumber0.55How much ticks near the pointer grow. 0 turns the wave off.
disabledbooleanfalseDisables dragging and keys.
classNamestring—Extra classes on the root.

Add it to your project

  1. 1

    Prepare your project

    You need Tailwind CSS and the @/import alias. If shadcn isn't set up yet, initialise it once:

    npx shadcn@latest init

    Then add the Nexus registry to your components.json (the registries key is the part that matters):

    {
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@nexus-labs": "https://www.nexus-ui.com/api/registry/{name}"
  }
}
  2. 2

    Add the component

    Run this from your project root. It adds the component, the utilities it uses and its packages.

    npx shadcn@latest add @nexus-labs/tick-slider
  3. 3

    Check what was added

    With the standard aliases, these files land in your project:

    components/
    tick-slider/
    index.ts
    tick-slider.tsx
  4. 4

    Copying by hand? Install the packages

    Skip this if you used the command above.

    npm install framer-motion
  5. 5

    Use it in a page

    Import it and render it. The Code tab above has the full example.

    // app/page.tsx
import { TickSlider } from "@/components/tick-slider";

export default function Page() {
  return (
    <main>
      <TickSlider />
    </main>
  );
}

More inputs & controls