Slider

A smooth and interactive range slider component with gradient styling and responsive thumb design. Click anywhere on the track to instantly set the value.

Default Usage

import { Slider } from "@/components/ui/Slider";
import { Label } from "@/components/ui/Label";

import { useState } from "react";

export const DefaultSliderExample = () => {
  const [value, setValue] = useState(50);

  return (
   div className="w-full max-w-md space-y-2 flex flex-col ">
        <Label> Volume: {value}%</Label>
        <Slider
          value={value}
          onChange={(value) => setValue(value)}
          min={0}
          max={100}
          step={1}
        />
      </div>
  );
};

Props

Features

• Click to Set: Click anywhere on the track to instantly set the value
• Smooth Interaction: Responsive hover effects and smooth transitions
• Gradient Design: Beautiful gradient track and thumb styling
• Native HTML: Built on standard HTML range input for maximum compatibility
• Accessible: Full keyboard navigation and screen reader support
• Dark Mode Ready: Adapts to light and dark themes using design tokens