How to Add a Slider to a React App

Before installing Slider, confirm your React project has the two things Drivn assumes: Tailwind CSS v4 installed and processing your styles, and a @/ path alias pointing at your source directory (the component ships as a .tsx file, so TypeScript is part of the stack). If you scaffolded with create-next-app, npm create vite, or npx drivn@latest create, both are already wired; for a custom setup the installation page lists the minimal config. The Slider's only import past React is the local cn utility for class merging — there is no third-party package to add and no icon dependency. The one detail worth knowing before you render it is that the Slider is a Client Component: it holds its value in state and reads pointer events off a ref, so its source opens with a 'use client' directive and renders inside a client boundary rather than straight in a Server Component.

Run the CLI from your project root to add the Slider source file. The command prompts once for your install directory (defaulting to src/components/ui/) and writes a single slider.tsx — no other files, because the component has no peer dependency beyond React and the cn utility. No global config file is created; the result is TypeScript source you edit like any other component. Confirm it landed in your editor, then commit it for a clean baseline. If your project uses a monorepo layout or a non-standard source path, the CLI docs cover the flags for targeting a custom location during install. Because the file is yours after install, future Drivn releases will not overwrite your edits — the whole control, from the pointer math to the styling object, is one file you can read top to bottom.

Import Slider and render it inside a Client Component. The simplest form is uncontrolled: pass defaultValue and let the component keep the value internally, reading onChange only when you need to react to a change. A bare <Slider defaultValue={50} /> gives you a working 0–100 control — those are the default min and max — with a draggable thumb, a filled range that tracks it, and click-to-set anywhere on the track. The example below wraps a single slider with a heading so it reads as a settings row. Because the file opens with 'use client', drop this into a client component or a page that already sits inside a client boundary; the Next.js Slider guide covers importing it into a Server Component page. Every dimension the control needs is built in, so there is no width or track styling to add before it works.

To read the value elsewhere — a live label, a preview, a synced second control — run the Slider controlled. Hold the number in useState, pass it as value, and pass your setter as onChange; the component renders exactly the number you hand it and reports the next snapped value on every drag. The snap respects min, max, and step: with step={10} on the default 0–100 range the thumb lands on the nearest ten, so onChange only ever fires 0, 10, 20, and so on. The example reads the live value into a label above the track, so the readout tracks the thumb in real time. Reach for controlled whenever the value needs to be visible outside the slider; stay uncontrolled with defaultValue when the slider owns its own value and you only read it on submit.

The Slider ships three sizes and two orientations, all as props. size is 'sm' | 'md' | 'lg' and scales the track height and thumb diameter together — sm is a 1-pixel track with a 3-unit thumb, lg a 2-pixel track with a 5-unit thumb. orientation="vertical" rotates the whole control into a default h-48 column with the thumb sliding up for higher values. Give it a name prop and it renders a hidden <input type="range" name={name}> that mirrors the value, so it posts with any surrounding <form> — including one wired to a react-hook-form Controller. Everything visible is a Tailwind class in the styles object inside the file you own: the track is bg-border, the filled range and the thumb are bg-foreground. Swap the range and thumb to bg-primary for a branded control and every Slider follows, matching dark and light mode with no override. For copy-paste variants see the Slider examples.