svelte-juxtapose

Easily juxtapose two blocks with a interactive slider. Currently only works with a horizontal slider. Want a vertical version? Let me know.

By

Examples

Simple

Before
After
A simple example of svelte-juxtapose featuring two image tags in the before and after slots.

Usage

Slots

Name Description
Before The "bottom" layer. Completely covered while slider is at 100%.
After The "top" layer. Completely covered while slider is at 0%.

Props

Name Default Description
starting 50 The percentage at which the slider should start. Should be given as a number equal to or greater than zero and equal to or less than zero.
width 600px The width of the container. Should ideally be set by using bind:clientWidth on the parent element.
height 300px The height of the container. Both blocks should have a similar aspect ratio so that this calculation could simply be 9/16 × width.
class "" Classes to apply to the container element.
style undefined Styles to apply to the container element.
--thumb-size calc(var(--height) / 10) The size of the thumb.
--thumb-color #000000 The color of the thumb.

Events

Name Properties Description
on:start active, position, event Fires when the slider has a mousedown or touchstart event
on:move active, position, event Fires when the slider has been moved. Movement is limited to 0-100% of the container width.
on:end active, position, event Fires when the window has a mouseup or touchend event, ending the movement.