@gradio/imageslider 0.2.0

package/dist/shared/ImageEl.svelte

@@ -0,0 +1,119 @@
+<script>import { createEventDispatcher, onMount, tick } from "svelte";
+import { resolve_wasm_src } from "@gradio/wasm/svelte";
+export let src = void 0;
+export let fullscreen = false;
+let resolved_src;
+export let fixed = false;
+export let transform = "translate(0px, 0px) scale(1)";
+export let img_el = null;
+export let hidden = false;
+export let variant = "upload";
+export let max_height = 500;
+let latest_src;
+$: {
+  resolved_src = src;
+  latest_src = src;
+  const resolving_src = src;
+  resolve_wasm_src(resolving_src).then((s) => {
+    if (latest_src === resolving_src) {
+      resolved_src = s;
+    }
+  });
+}
+const dispatch = createEventDispatcher();
+function get_image_size(img) {
+  if (!img)
+    return { top: 0, left: 0, width: 0, height: 0 };
+  const container = img.parentElement?.getBoundingClientRect();
+  if (!container)
+    return { top: 0, left: 0, width: 0, height: 0 };
+  const naturalAspect = img.naturalWidth / img.naturalHeight;
+  const containerAspect = container.width / container.height;
+  let displayedWidth, displayedHeight;
+  if (naturalAspect > containerAspect) {
+    displayedWidth = container.width;
+    displayedHeight = container.width / naturalAspect;
+  } else {
+    displayedHeight = container.height;
+    displayedWidth = container.height * naturalAspect;
+  }
+  const offsetX = (container.width - displayedWidth) / 2;
+  const offsetY = (container.height - displayedHeight) / 2;
+  return {
+    top: offsetY,
+    left: offsetX,
+    width: displayedWidth,
+    height: displayedHeight
+  };
+}
+onMount(() => {
+  const resizer = new ResizeObserver(async (entries) => {
+    for (const entry of entries) {
+      await tick();
+      dispatch("load", get_image_size(img_el));
+    }
+  });
+  resizer.observe(img_el);
+  return () => {
+    resizer.disconnect();
+  };
+});
+</script>
+
+<!-- svelte-ignore a11y-missing-attribute -->
+<img
+	src={resolved_src}
+	{...$$restProps}
+	class:fixed
+	style:transform
+	bind:this={img_el}
+	class:hidden
+	class:preview={variant === "preview"}
+	class:slider={variant === "upload"}
+	style:max-height={max_height && !fullscreen ? `${max_height}px` : null}
+	class:fullscreen
+	class:small={!fullscreen}
+	on:load={() => dispatch("load", get_image_size(img_el))}
+/>
+
+<style>
+	.preview {
+		object-fit: contain;
+		width: 100%;
+		transform-origin: top left;
+		margin: auto;
+	}
+
+	.small {
+		max-height: 500px;
+	}
+
+	.upload {
+		object-fit: contain;
+		max-height: 500px;
+	}
+
+	.fixed {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+	}
+
+	.fullscreen {
+		width: 100%;
+		height: 100%;
+	}
+
+	:global(.image-container:fullscreen) img {
+		width: 100%;
+		height: 100%;
+		max-height: none;
+		max-width: none;
+	}
+
+	.hidden {
+		opacity: 0;
+	}
+</style>

package/dist/shared/ImageEl.svelte.d.ts

@@ -0,0 +1,258 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: `data-${string}`]: any;
+        alt?: string | undefined | null;
+        crossorigin?: "anonymous" | "use-credentials" | "" | undefined | null;
+        decoding?: "async" | "auto" | "sync" | undefined | null;
+        fetchpriority?: "auto" | "high" | "low" | undefined | null;
+        height?: number | string | undefined | null;
+        ismap?: boolean | undefined | null;
+        loading?: "eager" | "lazy" | undefined | null;
+        referrerpolicy?: ReferrerPolicy | undefined | null;
+        sizes?: string | undefined | null;
+        src?: string | undefined | null;
+        srcset?: string | undefined | null;
+        usemap?: string | undefined | null;
+        width?: number | string | undefined | null;
+        readonly 'bind:naturalWidth'?: number | undefined | null;
+        readonly 'bind:naturalHeight'?: number | undefined | null;
+        accesskey?: string | undefined | null;
+        autofocus?: boolean | undefined | null;
+        class?: string | undefined | null;
+        contenteditable?: import("svelte/elements").Booleanish | "inherit" | "plaintext-only" | undefined | null;
+        contextmenu?: string | undefined | null;
+        dir?: string | undefined | null;
+        draggable?: import("svelte/elements").Booleanish | undefined | null;
+        enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | null;
+        hidden?: boolean | undefined;
+        id?: string | undefined | null;
+        lang?: string | undefined | null;
+        part?: string | undefined | null;
+        placeholder?: string | undefined | null;
+        slot?: string | undefined | null;
+        spellcheck?: import("svelte/elements").Booleanish | undefined | null;
+        style?: string | undefined | null;
+        tabindex?: number | undefined | null;
+        title?: string | undefined | null;
+        translate?: "yes" | "no" | "" | undefined | null;
+        inert?: boolean | undefined | null;
+        popover?: "auto" | "manual" | "" | undefined | null;
+        radiogroup?: string | undefined | null;
+        role?: import("svelte/elements").AriaRole | undefined | null;
+        about?: string | undefined | null;
+        datatype?: string | undefined | null;
+        inlist?: any;
+        prefix?: string | undefined | null;
+        property?: string | undefined | null;
+        resource?: string | undefined | null;
+        typeof?: string | undefined | null;
+        vocab?: string | undefined | null;
+        autocapitalize?: string | undefined | null;
+        autocorrect?: string | undefined | null;
+        autosave?: string | undefined | null;
+        color?: string | undefined | null;
+        itemprop?: string | undefined | null;
+        itemscope?: boolean | undefined | null;
+        itemtype?: string | undefined | null;
+        itemid?: string | undefined | null;
+        itemref?: string | undefined | null;
+        results?: number | undefined | null;
+        security?: string | undefined | null;
+        unselectable?: "on" | "off" | undefined | null;
+        inputmode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | null;
+        is?: string | undefined | null;
+        'bind:innerHTML'?: string | undefined | null;
+        'bind:textContent'?: string | undefined | null;
+        'bind:innerText'?: string | undefined | null;
+        readonly 'bind:contentRect'?: DOMRectReadOnly | undefined | null;
+        readonly 'bind:contentBoxSize'?: ResizeObserverSize[] | undefined | null;
+        readonly 'bind:borderBoxSize'?: ResizeObserverSize[] | undefined | null;
+        readonly 'bind:devicePixelContentBoxSize'?: ResizeObserverSize[] | undefined | null;
+        'data-sveltekit-keepfocus'?: true | "" | "off" | undefined | null;
+        'data-sveltekit-noscroll'?: true | "" | "off" | undefined | null;
+        'data-sveltekit-preload-code'?: true | "" | "eager" | "viewport" | "hover" | "tap" | "off" | undefined | null;
+        'data-sveltekit-preload-data'?: true | "" | "hover" | "tap" | "off" | undefined | null;
+        'data-sveltekit-reload'?: true | "" | "off" | undefined | null;
+        'data-sveltekit-replacestate'?: true | "" | "off" | undefined | null;
+        'aria-activedescendant'?: string | undefined | null;
+        'aria-atomic'?: import("svelte/elements").Booleanish | undefined | null;
+        'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined | null;
+        'aria-busy'?: import("svelte/elements").Booleanish | undefined | null;
+        'aria-checked'?: boolean | "false" | "mixed" | "true" | undefined | null;
+        'aria-colcount'?: number | undefined | null;
+        'aria-colindex'?: number | undefined | null;
+        'aria-colspan'?: number | undefined | null;
+        'aria-controls'?: string | undefined | null;
+        'aria-current'?: import("svelte/elements").Booleanish | "page" | "step" | "location" | "date" | "time" | undefined | null;
+        'aria-describedby'?: string | undefined | null;
+        'aria-details'?: string | undefined | null;
+        'aria-disabled'?: import("svelte/elements").Booleanish | undefined | null;
+        'aria-dropeffect'?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | null;
+        'aria-errormessage'?: string | undefined | null;
+        'aria-expanded'?: import("svelte/elements").Booleanish | undefined | null;
+        'aria-flowto'?: string | undefined | null;
+        'aria-grabbed'?: import("svelte/elements").Booleanish | undefined | null;
+        'aria-haspopup'?: import("svelte/elements").Booleanish | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | null;
+        'aria-hidden'?: import("svelte/elements").Booleanish | undefined | null;
+        'aria-invalid'?: import("svelte/elements").Booleanish | "grammar" | "spelling" | undefined | null;
+        'aria-keyshortcuts'?: string | undefined | null;
+        'aria-label'?: string | undefined | null;
+        'aria-labelledby'?: string | undefined | null;
+        'aria-level'?: number | undefined | null;
+        'aria-live'?: "off" | "assertive" | "polite" | undefined | null;
+        'aria-modal'?: import("svelte/elements").Booleanish | undefined | null;
+        'aria-multiline'?: import("svelte/elements").Booleanish | undefined | null;
+        'aria-multiselectable'?: import("svelte/elements").Booleanish | undefined | null;
+        'aria-orientation'?: "horizontal" | "vertical" | undefined | null;
+        'aria-owns'?: string | undefined | null;
+        'aria-placeholder'?: string | undefined | null;
+        'aria-posinset'?: number | undefined | null;
+        'aria-pressed'?: boolean | "false" | "mixed" | "true" | undefined | null;
+        'aria-readonly'?: import("svelte/elements").Booleanish | undefined | null;
+        'aria-relevant'?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | null;
+        'aria-required'?: import("svelte/elements").Booleanish | undefined | null;
+        'aria-roledescription'?: string | undefined | null;
+        'aria-rowcount'?: number | undefined | null;
+        'aria-rowindex'?: number | undefined | null;
+        'aria-rowspan'?: number | undefined | null;
+        'aria-selected'?: import("svelte/elements").Booleanish | undefined | null;
+        'aria-setsize'?: number | undefined | null;
+        'aria-sort'?: "none" | "ascending" | "descending" | "other" | undefined | null;
+        'aria-valuemax'?: number | undefined | null;
+        'aria-valuemin'?: number | undefined | null;
+        'aria-valuenow'?: number | undefined | null;
+        'aria-valuetext'?: string | undefined | null;
+        'on:copy'?: import("svelte/elements").ClipboardEventHandler<HTMLImageElement> | null | undefined;
+        'on:cut'?: import("svelte/elements").ClipboardEventHandler<HTMLImageElement> | null | undefined;
+        'on:paste'?: import("svelte/elements").ClipboardEventHandler<HTMLImageElement> | null | undefined;
+        'on:compositionend'?: import("svelte/elements").CompositionEventHandler<HTMLImageElement> | null | undefined;
+        'on:compositionstart'?: import("svelte/elements").CompositionEventHandler<HTMLImageElement> | null | undefined;
+        'on:compositionupdate'?: import("svelte/elements").CompositionEventHandler<HTMLImageElement> | null | undefined;
+        'on:focus'?: import("svelte/elements").FocusEventHandler<HTMLImageElement> | null | undefined;
+        'on:focusin'?: import("svelte/elements").FocusEventHandler<HTMLImageElement> | null | undefined;
+        'on:focusout'?: import("svelte/elements").FocusEventHandler<HTMLImageElement> | null | undefined;
+        'on:blur'?: import("svelte/elements").FocusEventHandler<HTMLImageElement> | null | undefined;
+        'on:change'?: import("svelte/elements").FormEventHandler<HTMLImageElement> | null | undefined;
+        'on:beforeinput'?: import("svelte/elements").EventHandler<InputEvent, HTMLImageElement> | null | undefined;
+        'on:input'?: import("svelte/elements").FormEventHandler<HTMLImageElement> | null | undefined;
+        'on:reset'?: import("svelte/elements").FormEventHandler<HTMLImageElement> | null | undefined;
+        'on:submit'?: import("svelte/elements").EventHandler<SubmitEvent, HTMLImageElement> | null | undefined;
+        'on:invalid'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:formdata'?: import("svelte/elements").EventHandler<FormDataEvent, HTMLImageElement> | null | undefined;
+        'on:load'?: import("svelte/elements").EventHandler | undefined | null;
+        'on:error'?: import("svelte/elements").EventHandler | undefined | null;
+        'on:beforetoggle'?: import("svelte/elements").ToggleEventHandler<HTMLImageElement> | null | undefined;
+        'on:toggle'?: import("svelte/elements").ToggleEventHandler<HTMLImageElement> | null | undefined;
+        'on:keydown'?: import("svelte/elements").KeyboardEventHandler<HTMLImageElement> | null | undefined;
+        'on:keypress'?: import("svelte/elements").KeyboardEventHandler<HTMLImageElement> | null | undefined;
+        'on:keyup'?: import("svelte/elements").KeyboardEventHandler<HTMLImageElement> | null | undefined;
+        'on:abort'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:canplay'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:canplaythrough'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:cuechange'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:durationchange'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:emptied'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:encrypted'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:ended'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:loadeddata'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:loadedmetadata'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:loadstart'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:pause'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:play'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:playing'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:progress'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:ratechange'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:seeked'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:seeking'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:stalled'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:suspend'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:timeupdate'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:volumechange'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:waiting'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:auxclick'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
+        'on:click'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
+        'on:contextmenu'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
+        'on:dblclick'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
+        'on:drag'?: import("svelte/elements").DragEventHandler<HTMLImageElement> | null | undefined;
+        'on:dragend'?: import("svelte/elements").DragEventHandler<HTMLImageElement> | null | undefined;
+        'on:dragenter'?: import("svelte/elements").DragEventHandler<HTMLImageElement> | null | undefined;
+        'on:dragexit'?: import("svelte/elements").DragEventHandler<HTMLImageElement> | null | undefined;
+        'on:dragleave'?: import("svelte/elements").DragEventHandler<HTMLImageElement> | null | undefined;
+        'on:dragover'?: import("svelte/elements").DragEventHandler<HTMLImageElement> | null | undefined;
+        'on:dragstart'?: import("svelte/elements").DragEventHandler<HTMLImageElement> | null | undefined;
+        'on:drop'?: import("svelte/elements").DragEventHandler<HTMLImageElement> | null | undefined;
+        'on:mousedown'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
+        'on:mouseenter'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
+        'on:mouseleave'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
+        'on:mousemove'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
+        'on:mouseout'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
+        'on:mouseover'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
+        'on:mouseup'?: import("svelte/elements").MouseEventHandler<HTMLImageElement> | null | undefined;
+        'on:select'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:selectionchange'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:selectstart'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:touchcancel'?: import("svelte/elements").TouchEventHandler<HTMLImageElement> | null | undefined;
+        'on:touchend'?: import("svelte/elements").TouchEventHandler<HTMLImageElement> | null | undefined;
+        'on:touchmove'?: import("svelte/elements").TouchEventHandler<HTMLImageElement> | null | undefined;
+        'on:touchstart'?: import("svelte/elements").TouchEventHandler<HTMLImageElement> | null | undefined;
+        'on:gotpointercapture'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
+        'on:pointercancel'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
+        'on:pointerdown'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
+        'on:pointerenter'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
+        'on:pointerleave'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
+        'on:pointermove'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
+        'on:pointerout'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
+        'on:pointerover'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
+        'on:pointerup'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
+        'on:lostpointercapture'?: import("svelte/elements").PointerEventHandler<HTMLImageElement> | null | undefined;
+        'on:gamepadconnected'?: import("svelte/elements").GamepadEventHandler<HTMLImageElement> | null | undefined;
+        'on:gamepaddisconnected'?: import("svelte/elements").GamepadEventHandler<HTMLImageElement> | null | undefined;
+        'on:scroll'?: import("svelte/elements").UIEventHandler<HTMLImageElement> | null | undefined;
+        'on:scrollend'?: import("svelte/elements").UIEventHandler<HTMLImageElement> | null | undefined;
+        'on:resize'?: import("svelte/elements").UIEventHandler<HTMLImageElement> | null | undefined;
+        'on:wheel'?: import("svelte/elements").WheelEventHandler<HTMLImageElement> | null | undefined;
+        'on:animationstart'?: import("svelte/elements").AnimationEventHandler<HTMLImageElement> | null | undefined;
+        'on:animationend'?: import("svelte/elements").AnimationEventHandler<HTMLImageElement> | null | undefined;
+        'on:animationiteration'?: import("svelte/elements").AnimationEventHandler<HTMLImageElement> | null | undefined;
+        'on:transitionstart'?: import("svelte/elements").TransitionEventHandler<HTMLImageElement> | null | undefined;
+        'on:transitionrun'?: import("svelte/elements").TransitionEventHandler<HTMLImageElement> | null | undefined;
+        'on:transitionend'?: import("svelte/elements").TransitionEventHandler<HTMLImageElement> | null | undefined;
+        'on:transitioncancel'?: import("svelte/elements").TransitionEventHandler<HTMLImageElement> | null | undefined;
+        'on:outrostart'?: import("svelte/elements").EventHandler<CustomEvent<null>, HTMLImageElement> | null | undefined;
+        'on:outroend'?: import("svelte/elements").EventHandler<CustomEvent<null>, HTMLImageElement> | null | undefined;
+        'on:introstart'?: import("svelte/elements").EventHandler<CustomEvent<null>, HTMLImageElement> | null | undefined;
+        'on:introend'?: import("svelte/elements").EventHandler<CustomEvent<null>, HTMLImageElement> | null | undefined;
+        'on:message'?: import("svelte/elements").MessageEventHandler<HTMLImageElement> | null | undefined;
+        'on:messageerror'?: import("svelte/elements").MessageEventHandler<HTMLImageElement> | null | undefined;
+        'on:visibilitychange'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:cancel'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:close'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:fullscreenchange'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        'on:fullscreenerror'?: import("svelte/elements").EventHandler<Event, HTMLImageElement> | null | undefined;
+        "data-testid"?: string | undefined;
+        fixed?: boolean | undefined;
+        transform?: string | undefined;
+        img_el?: HTMLImageElement | undefined;
+        variant?: ("preview" | "upload") | undefined;
+        max_height?: number | undefined;
+        fullscreen?: boolean | undefined;
+    };
+    events: {
+        load: CustomEvent<{
+            top: number;
+            left: number;
+            width: number;
+            height: number;
+        }>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ImageElProps = typeof __propDef.props;
+export type ImageElEvents = typeof __propDef.events;
+export type ImageElSlots = typeof __propDef.slots;
+export default class ImageEl extends SvelteComponent<ImageElProps, ImageElEvents, ImageElSlots> {
+}
+export {};

package/dist/shared/Slider.svelte

@@ -0,0 +1,183 @@
+<script>import { onMount } from "svelte";
+import { drag } from "d3-drag";
+import { select } from "d3-selection";
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+export let position = 0.5;
+export let disabled = false;
+export let slider_color = "var(--border-color-primary)";
+export let image_size = { top: 0, left: 0, width: 0, height: 0 };
+export let el = void 0;
+export let parent_el = void 0;
+let inner;
+let px = 0;
+let active = false;
+let container_width = 0;
+function set_position(width) {
+  container_width = parent_el?.getBoundingClientRect().width || 0;
+  if (width === 0) {
+    image_size.width = el?.getBoundingClientRect().width || 0;
+  }
+  px = clamp(
+    image_size.width * position + image_size.left,
+    0,
+    container_width
+  );
+}
+function round(n, points) {
+  const mod = Math.pow(10, points);
+  return Math.round((n + Number.EPSILON) * mod) / mod;
+}
+function update_position(x) {
+  px = clamp(x, 0, container_width);
+  position = round((x - image_size.left) / image_size.width, 5);
+}
+function drag_start(event) {
+  if (disabled)
+    return;
+  active = true;
+  update_position(event.x);
+}
+function drag_move(event) {
+  if (disabled)
+    return;
+  update_position(event.x);
+}
+function drag_end() {
+  if (disabled)
+    return;
+  active = false;
+}
+function update_position_from_pc(pc) {
+  px = clamp(image_size.width * pc + image_size.left, 0, container_width);
+}
+$:
+  set_position(image_size.width);
+$:
+  update_position_from_pc(position);
+onMount(() => {
+  set_position(image_size.width);
+  const drag_handler = drag().on("start", drag_start).on("drag", drag_move).on("end", drag_end);
+  select(inner).call(drag_handler);
+});
+</script>
+
+<svelte:window on:resize={() => set_position(image_size.width)} />
+
+<div class="wrap" role="none" bind:this={parent_el}>
+	<div class="content" bind:this={el}>
+		<slot />
+	</div>
+	<div
+		class="outer"
+		class:disabled
+		bind:this={inner}
+		role="none"
+		style="transform: translateX({px}px)"
+		class:grab={active}
+	>
+		<span class="icon-wrap" class:active class:disabled
+			><span class="icon left">◢</span><span
+				class="icon center"
+				style:--color={slider_color}
+			></span><span class="icon right">◢</span></span
+		>
+		<div class="inner" style:--color={slider_color}></div>
+	</div>
+</div>
+
+<style>
+	.wrap {
+		position: relative;
+		width: 100%;
+		height: 100%;
+		z-index: var(--layer-1);
+		overflow: hidden;
+	}
+
+	.icon-wrap {
+		display: block;
+		position: absolute;
+		top: 50%;
+		transform: translate(-20.5px, -50%);
+		left: 10px;
+		width: 40px;
+		transition: 0.2s;
+		color: var(--body-text-color);
+		height: 30px;
+		border-radius: 5px;
+		background-color: var(--color-accent);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: var(--layer-3);
+		box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.3);
+		font-size: 12px;
+	}
+
+	.icon.left {
+		transform: rotate(135deg);
+		text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
+	}
+
+	.icon.right {
+		transform: rotate(-45deg);
+		text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.1);
+	}
+
+	.icon.center {
+		display: block;
+		width: 1px;
+		height: 100%;
+		background-color: var(--color);
+		opacity: 0.1;
+	}
+
+	.icon-wrap.active {
+		opacity: 0;
+	}
+
+	.icon-wrap.disabled {
+		opacity: 0;
+	}
+
+	.outer {
+		width: 20px;
+		height: 100%;
+		position: absolute;
+		cursor: grab;
+		position: absolute;
+		top: 0;
+		left: -10px;
+		pointer-events: auto;
+		z-index: var(--layer-2);
+	}
+	.grab {
+		cursor: grabbing;
+	}
+
+	.inner {
+		width: 1px;
+		height: 100%;
+		background: var(--color);
+		position: absolute;
+		left: calc((100% - 2px) / 2);
+	}
+
+	.disabled {
+		cursor: auto;
+	}
+
+	.disabled .inner {
+		box-shadow: none;
+	}
+
+	.content {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+</style>

package/dist/shared/Slider.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        position?: number | undefined;
+        disabled?: boolean | undefined;
+        slider_color?: string | undefined;
+        image_size?: {
+            top: number;
+            left: number;
+            width: number;
+            height: number;
+        } | undefined;
+        el?: HTMLDivElement | undefined;
+        parent_el?: HTMLDivElement | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type SliderProps = typeof __propDef.props;
+export type SliderEvents = typeof __propDef.events;
+export type SliderSlots = typeof __propDef.slots;
+export default class Slider extends SvelteComponent<SliderProps, SliderEvents, SliderSlots> {
+}
+export {};