Image Slider Showcase
Example
Component Documentation
Component Name
ImageSlider
Builder Function Name
create_image_slider_manager
Description
creates a comparison slider between two images, allowing the user to slide and compare before/after views
Use like example
Config
| Property | Type | Default | Description |
|---|---|---|---|
| src1 | string | url for the first/base image | |
| src2 | string | 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 |
Methods
| Method | Description | Parameters | Returns |
|---|---|---|---|
| handle_mount | executes on svelte onMount hook, attempts to set aspect ratio based on src1 | No Params | void |
| handle_pointer_event | manages pointer events (down/move/up) to update the slider percentage when dragging | event: pointer or mouse event type: string (down/move/up) id_input: string (the manager’s id to ensure the event belongs to this instance) | void |
Returned Properties
| Property | Type | Description |
|---|---|---|
| id | string | unique identifier for the slider instance |
| src1 | string | url for the first/base image |
| src2 | string | url for the second/compare image |
| color1 | string | primary color used for the divider line and handle |
| color2 | string | secondary outline color for the divider line/handle |
| percent_shown | number | current slider value (0–100) controlling how much of src2 is shown |
| touch_start_x | number | tracks the pointer’s x position when the user starts dragging |
| aspect_ratio | number | the aspect ratio determined by the first image's naturalWidth / naturalHeight |
| button_manager | object | the button manager for the slider handle’s icon |
