Compare

Before / after slider

Two images of the same frame — a retouch, a restoration, a colour grade — with a divider to drag between them. For two things side by side that aren't the same frame, lay them out next to each other instead.

Basic

50% · drag or use ← →

<script setup lang="ts">
import { ref } from "vue";
import { BlessCompare } from "blessing-ui";
import { shots } from "./_data";
const pos = ref(50);
</script>

<template>
  <div class="col" style="max-width: 480px">
    <BlessCompare v-model="pos" style="aspect-ratio: 3 / 2">
      <template #before
        ><img :src="shots[6].src" alt="Episode 1 key frame, flat colour"
      /></template>
      <template #after><img :src="shots[0].src" alt="Episode 1 key frame, final grade" /></template>
    </BlessCompare>
    <small>{{ pos }}% · drag or use ← →</small>
    <BlessCompare orientation="vertical" label="Compare top and bottom" style="aspect-ratio: 3 / 2">
      <template #before><img :src="shots[2].src" alt="Poster, red draft" /></template>
      <template #after><img :src="shots[3].src" alt="Poster, orange final" /></template>
    </BlessCompare>
  </div>
</template>

• It is a native range on top: drag anywhere, or focus it and use the arrow keys. The value is how much of #after shows, read out as "60% after".
• orientation="vertical" splits top and bottom. In right-to-left pages the reveal starts from the right, with the range.
• Give both images the same size and real alt text; label names the control.

Usage

import { BlessCompare } from "blessing-ui";

API

Props

Name	Type	Default	Description
label	string	"Compare"
orientation	"horizontal" | "vertical"	"horizontal"
modelValue	number	50	0–100, how much of the "after" side is revealed

Events

Name	Payload	Description
update:modelValue	[value: number]

Slots

Name	Scope	Description
before	—
after	—