Bubble Slider

Forms

About

A draggable range slider that pops a value bubble above the thumb while dragging, leaning and squashing with drag velocity.

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

Code

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

Usage.tsx

import * as React from "react";
import { BubbleSlider } from "@/components/ui/range-slider-bubble";

function RangeSliderBubblePreview() {
  const [value, setValue] = React.useState(28);

  return (
    <div className="flex w-full max-w-sm flex-col gap-1">
      <span className="text-sm text-muted-foreground">
        Drag fast and the bubble leans
      </span>
      <BubbleSlider value={value} onValueChange={setValue} aria-label="Value" />
    </div>
  );
}

export default RangeSliderBubblePreview;