Paper Ui

v2.0

PU-Compare Component

An interactive comparison slider component for visualizing differences between two states

Usage

Basic Usage

After

Before

Dark Mode Comparison

Light/Dark Comparison

With Custom Handle

Light/Dark Comparison

Props

Prop	Type	Default	Description
ariaLabel	string	undefined	Accessibility label for screen readers
ariaLabelledby	string	undefined	ID reference for accessibility label
withDarkMode	boolean	false	Show dark/light mode comparison UI
withIcon	boolean	false	Display chevron icons on slider handle

Features

Interactive comparison slider
Accessible ARIA labels
Dark/light mode comparison
Customizable handle
Flexible content slots
Responsive design

Styling

Base styling with Tailwind:

.compare-container {
  @apply relative w-full max-w-lg border-2 border-primary-light-500 
        rounded-lg shadow-lg overflow-hidden;
}

.slider-handle {
  @apply absolute top-0 bottom-0 border border-primary-light-500;
}

Dark mode styling:

.dark-mode-overlay {
  @apply dark bg-primary-light-500;
}

Accessibility

Use ariaLabel or ariaLabelledby for screen reader support
Keyboard navigable
High contrast colors
Semantic HTML structure

Dependencies

PUIcon for handle icons
Tailwind CSS for styling
Vue 3 Composition API