1

Ratio Slider

A split ratio slider with two color bars, a draggable divider, and responsive labels that collapse when space is tight.

Dependencies

motion

Interaction Type

Hover for micro-clicks; drag the divider or press track for real-time tick sounds. Use arrow keys to adjust the ratio.

Props

Options you can pass to customize this component.

Prop
Type
Description
value
number

Controlled ratio value (0-100).

defaultValue
number

Initial ratio for uncontrolled usage. Defaults to 60.

onChange
(value: number) => void

Called with the new ratio on each change.

leftLabel
string

Label for the left side. Defaults to "RICH".

rightLabel
string

Label for the right side. Defaults to "LIGHT".

leftColor
string

Background color of the left bar.

rightColor
string

Background color of the right bar.

disabled
boolean

Disables all interactions.

className
string

Additional CSS classes.

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/ratio-slider.json

How to use

import { RatioSlider } from "@/components/ui/ratio-slider"

export function Demo() {
  return (
    <RatioSlider
      defaultValue={60}
      leftLabel="RICH"
      rightLabel="LIGHT"
      leftColor="var(--color-fg)"
      rightColor="var(--color-muted)"
    />
  )
}

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

  • •Free for personal and commercial use
  • •No attribution required
  • •Cannot be resold as a standalone product
  • •Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use
// No code loaded.
RICH60%
40%LIGHT
npx shadcn@latest addhttps://ui.nexvyn.dev/r/ratio-slider.json