Gooey Range Slider

Pro

Drag the thumb and the filled track stretches with it, then the thumb contracts into a circle when you let go.

sliderrangegoomorphliquidinput

Overview

Gooey Range Slider is a React and Tailwind CSS range input with a gooey effect, in Next.js or any React app, whose fill and thumb are one liquid blob. Drag quickly and the thumb pulls a tail behind it that contracts back into a circle when you stop, with the current value printed on the thumb. Keyboard users get arrow keys, Page Up, Page Down, Home, and End on a proper ARIA slider, which supports min, max, step, and a controlled value. Reduced motion drops the stretch. onValueChange fires on every step while dragging, so debounce expensive work.

Installation

Run the following command

~/your-project

pnpm dlx wensity@latest add gooey-slider

Usage

Import GooeySlider from @/components/wensity/gooey-slider and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx

1import { GooeySlider } from "@/components/wensity/gooey-slider";
2
3export default function Example() {
4  return <GooeySlider defaultValue={64} />;
5}

Props

Prop	Type	Default	Description
`min`	number	0	Smallest value.
`max`	number	100	Largest value.
`step`	number	1	Increment for dragging, clicks, and arrow keys.
`defaultValue`	number	0	Value on first render when value is not set.
`value`	number	-	Controlled value. Pair it with onValueChange.
`onValueChange`	(value: number) => void	-	Called with the next value while dragging, on release, and from the keyboard.
`label`	string	Value	Accessible name announced for the slider.
`width`	number	300	Track width in pixels. Shrinks to fit a narrower container.
`viscosity`	number	7	How far the blend spreads between the fill and the thumb. 0 keeps a hard edge.
`fill`	string	theme foreground	Color of the fill and the thumb. Leave it unset and they follow the active theme.
`ink`	string	theme background	Number color on the thumb. Leave it unset and the number uses the inverse theme color.