Components / Media

Image Slider

Component + manager

Creates a comparison slider between two images, allowing the user to slide and compare before/after views.

Preview

Usage

API reference

Live preview

Interactive example

Loading example…

Usage

Import the component and its manager, then make it your own.

ComponentImageSlider

Managercreate_image_slider_manager

svelte

<script>
  // Import the shared stylesheet once in your application's root layout.
  import "sveltekit-ui/style.css"
  import { ImageSlider, create_image_slider_manager } from "sveltekit-ui"

  // Inline artwork keeps this example independent of image hosting.
  const artwork = (sky) => "data:image/svg+xml," + encodeURIComponent(
    '<svg xmlns="http://www.w3.org/2000/svg" width="640" height="360" viewBox="0 0 640 360">' +
    '<rect width="640" height="360" fill="' + sky + '"/>' +
    '<circle cx="500" cy="90" r="42" fill="#fde68a"/>' +
    '<path d="M0 360 190 115 390 360ZM240 360 430 160 640 360Z" fill="#164e63"/></svg>'
  )

  const manager = create_image_slider_manager({
    src1: artwork("#94a3b8"),
    src2: artwork("#bae6fd"),
    percent_shown: 50,
    aria_label: "Compare original and edited sky",
  })
</script>

<div style="max-width: 64rem;">
  <ImageSlider {manager} />
</div>
<p>Drag the divider or focus it and use the arrow keys.</p>

API reference

Configure the manager, call its methods, and read its reactive state.

6 entries in configuration

Property	Type	Default	Description
`src1`	`string`	`null`	url for the first/base image
`src2`	`string`	`null`	url for the second or 'comparison' image
`color1`	`string`	`var(--primary-t)`	main color for the center dividing line and handle
`color2`	`string`	`color-mix(in oklab, var(--primary-t), var(--bg) 80%)`	secondary color used to outline the dividing line or handle
`percent_shown`	`number`	`50`	initial percentage of how much of the second image is shown vs. the first
`aria_label`	`string or function`	`Image comparison`	Accessible name for the keyboard-operable image comparison slider.