> For the complete documentation index, see [llms.txt](https://analog.groupthought.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://analog.groupthought.com/reference/alpine/slider-reveal.md).

# x-slider-reveal

Directives and a magic for the before/after slider: a spring-animated reveal with a draggable handle and optional scroll control.

Directives and a magic for the before/after slider: a spring-animated reveal with a draggable handle and optional scroll control.

| Directive / magic                             | What it does                                                                                                        |
| --------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
| `x-slider-reveal`                             | The root. Holds the reveal progress, 0–100                                                                          |
| `x-slider-reveal.vertical`                    | Vertical movement and clipping instead of horizontal                                                                |
| `x-slider-reveal.progress.65%`                | The resting progress (default 0)                                                                                    |
| `x-slider-reveal.from.10%`                    | The starting progress; the reveal animates from here to `.progress` when scroll control starts                      |
| `.stiffness.240` / `.damping.35` / `.mass.50` | Spring tuning for the handle and reveal. `.mass.50` is `0.5`                                                        |
| `.edge-buffer.4px`                            | Keeps the handle's content this many pixels from the root edge (default 2px)                                        |
| `x-slider-reveal:handle`                      | Translated by the progress                                                                                          |
| `x-slider-reveal:reveal`                      | Clipped by the progress with `clip-path`                                                                            |
| `x-before-after-slider-reveal`                | Analog wrapper: forwards the same modifiers and toggles scroll control with section visibility                      |
| `$sliderReveal`                               | The state: `progress` (get/set, clamps to the handle's range), `progressValue`, `enableScroll()`, `disableScroll()` |

`enableScroll()` does nothing when the visitor prefers reduced motion or the device reports low power, so the entrance animation and scroll drift don't run. the handle still responds to direct `progress` changes. Movement and clipping flip automatically in right-to-left documents.

The plugin ships in Analog's `@theme/slider-reveal` bundle and loads lazily on sections that use it.

## Examples

### A basic before/after

Use `x-slider-reveal:reveal` on the "after" layer and `x-slider-reveal:handle` on the divider:

```html
<div x-slider-reveal.progress.50% class="relative overflow-hidden">
  <img src="before.jpg" class="absolute inset-0" alt="…">
  <img src="after.jpg" x-slider-reveal:reveal class="absolute inset-0" alt="…">
  <div x-slider-reveal:handle class="absolute z-30 size-full will-change-transform">…</div>
</div>
```

Both layers fill the root; the reveal's `clip-path` inset follows the progress, so the "after" image shows to the right of the handle (below it with `.vertical`).

### Dragging with a range input

Use `x-model.number` on an invisible range input bound to `$sliderReveal.progress`:

```html
<input
  x-model.number="$sliderReveal.progress"
  type="range"
  min="3"
  max="97"
  class="absolute z-40 size-full opacity-0 cursor-col-resize"
  aria-label="{{ 'other.accessibility.before_after_controller' | t }}"
>
```

This is how `before-after.liquid` makes the slider draggable and keyboard-operable with one input. The native input handles pointer, arrow keys, and the accessible name, while the spring smooths the value on its way to the handle. Writes to `progress` clamp to the handle's allowed range, so the input and the visuals never disagree at the edges.

### Vertical orientation

Use the `vertical` modifier to move the handle down the slider and clip from the top:

```html
<div x-slider-reveal.vertical.progress.50%>…</div>
```

The Before/after section's "Orientation" setting toggles this.

### Scroll control

Use `x-before-after-slider-reveal` to animate in from `.from` and then drift the reveal with page scroll:

```html
<before-after x-before-after-slider-reveal.from.0%.progress.50%>
  …
</before-after>
```

The wrapper forwards its modifiers to `x-slider-reveal` and calls `$sliderReveal.enableScroll()` while the section intersects the viewport and `disableScroll()` when it scrolls out, so offscreen sliders do no scroll work. The base directives never scroll on their own. Outside Analog's snippet, call `$sliderReveal.enableScroll()` yourself.

## Options

There is no options object. The root modifiers above are the whole API. The spring defaults are `stiffness: 300`, `damping: 30`, `mass: 0.05`. The Before/after section and the Pair Before/after block are the merchant-facing surfaces built on this plugin; for the gesture primitives other interactive plugins share, see [Gesture & motion internals](/reference/alpine/scroll-motion-internals.md).