Fluid Slider

A labeled Base UI range control with direct surface selection, a dedicated draggable indicator, and restrained boundary resistance.

Library

Sona UI

Framework

React

Type

ui

License

MIT

Dependencies

@base-ui/react, motion

Install

npx shadcn@latest add @sona-ui/fluid-slider

Files

• src/registry/sonaui/fluid-slider/fluid-slider.tsx
• src/registry/sonaui/sona-utils/sona-utils.ts
• src/lib/sona-utils.ts

Source

https://github.com/Dinil-Thilakarathne/sona-ui

Categories

• Input Components
• React Input Components
• Tailwind CSS Input Components
• Animated Input Components
• Range Slider Components
• React Range Slider Components
• Tailwind CSS Range Slider Components
• Animated Range Slider Components
• Slider Components
• React Slider Components
• Tailwind CSS Slider Components
• Animated Slider Components

More from Sona UI

• Accordion
• Activity Graph
• Animated Checkbox
• Animated Dialog
• Animated Dropdown
• Animated Segmented Control
• Animated Switch
• Animated Tabs
• Assignment Cluster
• Avatar Showcase
• BubbleUpButton
• Button