Documentation

Installation

1. Download the sleek-compare.zip file from your purchase
2. Go to Plugins > Add New > Upload Plugin in WordPress
3. Choose the zip file and click Install Now
4. Activate the plugin
5. Visit Settings > Sleek Compare for quick start instructions

Gutenberg Block

The easiest way to add a slider in the block editor:

1. Click the + button to add a new block
2. Search for "Before/After Slider" or "Sleek Compare"
3. Select your before and after images from the media library
4. Customize labels, colors, and starting position in the sidebar

The block includes a live preview so you can see exactly how your slider will look.

Elementor Widget

Full Elementor integration with style controls:

1. Search for "Before/After Slider" in the widgets panel
2. Drag the widget to your page
3. Upload images in the Content tab
4. Customize handle color, labels, and typography in the Style tab

Shortcode

Use the shortcode in the classic editor, widgets, or any page builder:

Basic Usage

[sleek_compare before="https://example.com/before.jpg" after="https://example.com/after.jpg"]

With All Options

[sleek_compare
  before="https://example.com/before.jpg"
  after="https://example.com/after.jpg"
  start="30"
  label_before="Original"
  label_after="Enhanced"
  show_labels="true"
  handle_color="#3498db"
]

Shortcode Attributes

CSS Variables

Customize the slider appearance with CSS variables. Add this to your theme's stylesheet or Customizer:

.sleek-compare {
  --sleek-handle-color: #ffffff;
  --sleek-handle-size: 44px;
  --sleek-label-bg: rgba(0,0,0,0.6);
  --sleek-label-color: #ffffff;
  --sleek-border-radius: 8px;
}

Keyboard Navigation

The slider is fully accessible with keyboard controls: