@fabiuix

Bendy slider

A tactile slider that bends at the edges.

Installation

npx shadcn@latest add qubydev/bunui/bendy-slider

How to use

demo.tsx
import { BendySlider } from "@/components/ui/bendy-slider"


export function Demo() {
  return <BendySlider defaultValue={50} />
}

Props

Options you can pass to customize this component.

Prop
Type
Description
value
number

Controlled slider value between min and max.

defaultValue
number

Initial value when uncontrolled. Defaults to track center.

min
number

Minimum slider value.

max
number

Maximum slider value.

step
number

Step increment value.

onValueChange
(value: number) => void

Called whenever the slider value changes during dragging or navigation.

onValueCommit
(value: number) => void

Called when dragging ends or keyboard input commits.

icon
React.ReactNode

Leading icon rendered on the left of the slider track.

formatValue
(value: number) => React.ReactNode

Custom formatter for the value/percentage label on the right.

size
smdefaultlg

Height and knob sizing scale.

maxBend
number

Maximum curvature displacement in pixels at the edges.

disabled
boolean

Disables interaction and dims the slider.

className
string

Extra classes merged onto the slider root element.

Dependencies

lucide-react

Contact

Found a bug or issue? Open an issue or send a note.

License & Usage

  • •Free to use and modify in personal and commercial projects.
  • •Attribution to Bun UI is appreciated when using a component.
  • •Please do not resell the components as your own kit.