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. Defaults to var(--color-fg).

rightColor
string

Background color of the right bar. Defaults to var(--color-border-strong).

leftLabelColor
string

Left label color while it sits over the left bar. Defaults to var(--color-bg).

rightLabelColor
string

Right label color while it sits over the right bar. Defaults to var(--color-fg).

compactLeftLabelColor
string

Left label color once it moves above the bars onto the page background. Defaults to var(--color-fg).

compactRightLabelColor
string

Right label color once it moves above the bars onto the page background. Defaults to var(--color-muted).

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-border-strong)"
    />
  )
}

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