Tooltip Slider Demo

About Tooltip Slider

The Tooltip Slider component extends the Slider component from shadcn/ui to add an interactive tooltip that appears when clicking on the slider thumb and elegantly displays progress information.

Installation

1. Install the slider component from shadcn/ui:

npx shadcn-ui@latest add slider

2. Copy the TooltipSlider component to your project:

// Copy TooltipSlider.tsx to your components directory

3. Add required SVG assets to your public directory:

/public/dot.svg   - Default image for in-progress state
/public/check.svg - Default image for completed state

Demo

Tooltip Slider
UI Component
An interactive slider with tooltip and visual progress indicators.
Interactive Sliders
Click and hold on the slider thumb to see the tooltip with progress indicator.
The tooltip appears on mousedown and disappears on mouseup.

Usage

import { TooltipSlider } from "@/components/extensions/TooltipSlider";

export default function Demo() {
  const [value, setValue] = useState([25]);
  
  return (
    <div>
      <TooltipSlider
        value={value}
        onValueChange={setValue}
        max={100}
        step={1}
        trackColor="bg-secondary"
        rangeColor="bg-primary"
        progressBgColor="#e2e8f0"
        progressFillColor="#84cc16"
        defaultImage="/dot.svg"
        maxImage="/check.svg"
      />
    </div>
  );
}

Features

  • Interactive tooltip appears when clicking/touching the slider thumb
  • Real-time updates with precise positioning as you drag
  • Circular progress indicator shows percentage toward max value
  • Status icon changes from dot to check at max value
  • Current value displayed alongside the progress indicator
  • Smooth animations for better user experience
  • Fully customizable colors and images
  • Supports custom max values and step sizes
  • Works with keyboard navigation and screen readers