Component•Free

Gooey Value Slider

An accessible range input with a liquid SVG value bubble that stretches out of the thumb while the user drags or uses the keyboard.

Drag the value or use the arrow keys

Overview

About the Gooey Value Slider

An accessible range input with a liquid SVG value bubble that stretches out of the thumb while the user drags or uses the keyboard. It is delivered as editable TypeScript for React. Tailwind CSS is not required; the component's visual CSS is embedded in its TypeScript source. Its focused API can be adapted to your own content and visual system.

Usage

When to use it

Creative controls for volume, intensity, progress, pricing, or percentage values.
Playful product experiences that need expressive feedback without a canvas or animation runtime.

What’s included

Files installed with the component

Gooey Value Slider source

components/gooey-value-slider.tsx

Editable React and TypeScript component source.

Working example

examples/example.tsx

A minimal import and render example that matches the packaged API.

Installation guide

README.md

Manual ZIP installation, styling, compatibility, asset, and usage notes.

Usage

Import and render

Copy the packaged source to the documented path, then use the public API shown below.

Import

import { GooeyValueSlider } from "@/components/gooey-value-slider";

Minimum example

export default function Volume() {
  return <GooeyValueSlider defaultValue={40} aria-label="Volume" />;
}

Props

Component API

Prop	Type	Default	Description
value	number	undefined	Controlled slider value.
defaultValue	number	50	Initial uncontrolled value.
min	number	0	Minimum permitted value.
max	number	100	Maximum permitted value.
step	number	1	Value increment.
accentColor	string	"#03a9f4"	Track, thumb, and bubble accent color.
className	string	""	Additional root class names.
style	CSSProperties	undefined	Inline styles for the root element.
formatValue	(value: number) => ReactNode	Built-in numeric formatter	Customizes the displayed bubble value.
onValueChange	(value: number) => void	undefined	Runs whenever the slider value changes.

Also accepts native range input attributes except the attributes replaced by the typed value API.

Compatibility

Verified project setup

ReactLoom's preview is tested with Next.js 16.3.8 App Router, React 19.2.8, TypeScript 5.9.3, and Tailwind CSS 4.3.3. This describes the store environment, not the product's minimum requirements.
This interactive component includes the "use client" directive and must remain behind a Client Component boundary in the Next.js App Router.
Tailwind CSS is not required; the component's visual CSS is embedded in its TypeScript source.

Images: No image files are included or required by the packaged component.
Fonts: No font files are included. The component uses system font fallbacks unless your app supplies a matching font.

Installation

Add it to your project

Download the Gooey Value Slider ZIP, place the source file at src/components/gooey-value-slider.tsx, and copy the example into your own page or feature folder.

Target path

src/components/gooey-value-slider.tsx

No additional npm runtime packages are required beyond the React host; follow the styling requirements below.

Styling requirements

Tailwind CSS is not required by this component.
All component styles are embedded in components/gooey-value-slider.tsx; the gooey SVG filter is inline.