Slider One

A smooth, animated React slider with draggable thumb, dynamic progress, and auto-adjusting labels for precise value selection inspired by Lichin Lin.

Radius30

Loading demo...

default.tsx

import {
  Slider,
  SliderLabel,
  SliderProgress,
  SliderTrack,
  SliderThumb,
} from "@/components/animations/slider-one";
 
const App = () => {
  return (
    <div className="size-full flex items-center justify-center bg-background">
      <div className="max-w-lg w-full">
        <Slider min={0} max={60} defaultValue={30}>
          <SliderTrack>
            <SliderLabel label="Radius" />
            <SliderProgress />
            <SliderThumb />
          </SliderTrack>
        </Slider>
      </div>
    </div>
  );
};
 
export default App;

import

import {
  Slider,
  SliderLabel,
  SliderProgress,
  SliderTrack,
  SliderThumb,
} from "@/components/animations/slider-one";

usage

<Slider min={0} max={60} defaultValue={30}>
  <SliderTrack>
    <SliderLabel label="Radius" />
    <SliderProgress />
    <SliderThumb />
  </SliderTrack>
</Slider>

View button

Group Accordion