Slosh Slider

Liquid fill slider. Corner, viscosity, momentum, tilt.

11 KB

•

Updated on September 20, 2026

Installation

Bash

pnpm dlx shadcn@latest add @spaceui/components-spaceui-slosh-slider

Usage

Code

import { SloshSlider } from '@/components/spaceui/slosh-slider'

export default function Example() {
  const [value, setValue] = React.useState(42)
  return <SloshSlider value={value} onValueChange={setValue} corner={13} viscosity={15} momentum={55} tilt={45} />
}

Props

Prop	Type	Default	Description
`value`	number	—	Controlled value
`min`	number	0	Minimum
`max`	number	100	Maximum
`step`	number	1	Snap
`height`	number\|string	40	Slider track height in px or CSS unit
`ring`	boolean	true	Inner offset frame ring around track
`onValueChange`	(value: number) => void	—	Change handler
`corner`	number	13	Fill radius, 0–20
`viscosity`	number	15	0 rigid, 100 loose
`momentum`	number	55	Coast after release
`tilt`	number	45	Lean on the leading edge

Keep in mind

MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.

Smooth Slider

Tick Slider

On This Page

Installation Usage Props Related Components