Slider

Component 12

About

An input where the user selects a value from within a given range.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Slider to your project and fits it to your theme.

Code

How Slider is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

'use client';

import { useEffect, useState } from 'react';
import { Slider, SliderThumb } from '@/components/ui/slider';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';

export default function SliderDemo() {
  const [value, setValue] = useState<number[]>([100, 450]);
  const [isOpen, setIsOpen] = useState(false);

  useEffect(() => {
    setIsOpen(true);
  }, []);

  return (
    <div className="w-full md:w-[400px]">
      <Slider
        defaultValue={[100, 450]}
        min={0}
        max={600}
        step={1}
        onValueChange={(val) => {
          setValue(val);
        }}
      >
        <TooltipProvider>
          <Tooltip open={isOpen}>
            <TooltipTrigger asChild>
              <SliderThumb />
            </TooltipTrigger>
            <TooltipContent side="top" forceMount>
              {value[1] ?? 0}
            </TooltipContent>
          </Tooltip>
        </TooltipProvider>

        <TooltipProvider>
          <Tooltip open={isOpen}>
            <TooltipTrigger asChild>
              <SliderThumb />
            </TooltipTrigger>
            <TooltipContent side="top" forceMount>
              {value[1] ?? 0}
            </TooltipContent>
          </Tooltip>
        </TooltipProvider>
      </Slider>
    </div>
  );
}