Animated Slider

Radix UI slider with an animated NumberFlow value label above the thumb. Smooth digit transitions on drag.

How to use

tsx20 lines

 1"use client";
 2 
 3import { useState } from "react";
 4import { Slider } from "@/components/lab/components/Slider";
 5 
 6export default function Demo() {
 7  const [value, setValue] = useState([50]);
 8 
 9  return (
10    <div className="flex h-screen w-full items-center justify-center p-8">
11      <Slider
12        value={value}
13        onValueChange={setValue}
14        min={0}
15        max={100}
16        step={1}
17      />
18    </div>
19  );
20}

Dependencies

@radix-ui/react-slider@number-flow/reactclsx