Comparison Slider

A slider component that allows comparison between two elements with a draggable divider.

✅ Early Returns

const getUserStatus = (user: User) => {
  if (!user.isActive) return 'inactive'
  if (!user.hasVerifiedEmail) return 'unverified'
  if (!user.hasPremium) return 'active'
  return 'premium'
}

❌ Nested Conditionals

const getUserStatus = (user: User) => {
  if (user.isActive) {
    if (user.hasVerifiedEmail) {
      if (user.hasPremium) {
        return 'premium'
      } else {
        return 'active'
      }
    } else {
      return 'unverified'
    }
  } else {
    return 'inactive'
  }
}

Installation

npx shadcn@latest add "https://ui.paukraft.com/r/comparison-slider"

Custom Props

firstComponent

The component to show on the left side

Type: React.ReactNodeRequired: Yes

secondComponent

The component to show on the right side

Type: React.ReactNodeRequired: Yes

autoHideSlider

Whether the slider line should disappear when not interacting

Type: booleanRequired: No

defaultPosition

The default position of the slider in % from 0 to 100

Type: numberRequired: NoDefault: 50