Bubble Slider

Soft gradient range sliders with large touch targets.

Preview

Usage

import { BubbleSlider } from "@/components/profile"

const [value, setValue] = useState([50])

<BubbleSlider
  value={value}
  onValueChange={setValue}
  variant="gradient"
  showValue
  label="Volume"
/>

Variants

Default

Gradient

Rainbow

Value Display

Show the current value above the slider thumb.

Custom Range

Price: $0 - $500

Rating: 1 - 5

<BubbleSlider
  min={0}
  max={500}
  step={10}
  value={[250]}
  onValueChange={setValue}
/>

Props

Prop	Type	Default	Description
value	number[]	[0]	Current value(s)
onValueChange	(value: number[]) => void	-	Value change handler
min	number	0	Minimum value
max	number	100	Maximum value
step	number	1	Step increment
variant	"default" \| "gradient" \| "rainbow"	"default"	Track color variant
showValue	boolean	false	Show current value label
label	string	-	Accessible label