Compare

Side-by-side comparison slider component.

View Source 

Usage

@import "winduum/src/components/compare/index.css" layer(components);

Variants

• default 

Installation

Follow instructions for individual framework usage below

• winduum 
• winduum-stimulus 

Examples

Default

html

<div class="x-compare rounded size-fit accent-light">
    <input type="range" step="0.1" aria-hidden="true" data-action="compareInput">
    <div class="x-button circle" aria-hidden="true">
        <svg class="size-6" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none">
            <path class="-translate-x-1.5 scale-75 origin-center" stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
            <path class="translate-x-1.5 scale-75 origin-center" stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
        </svg>
    </div>
    <div class="x-image">
        <img src="https://via.placeholder.com/896x504/333/" alt="Image 1" loading="lazy" width="896" height="504">
        <img src="https://via.placeholder.com/896x504/888" alt="Image 2" loading="lazy" width="896" height="504">
    </div>
</div>

js

<script type="module">
    import { setPosition, setKeyboardStep, setMouseStep } from 'winduum/src/components/compare/index.js'

    document.querySelectorAll('[data-action="compareInput"]').forEach(compareInput => {
        compareInput.addEventListener('input', setPosition)

        compareInput.addEventListener('keydown', setKeyboardStep)

        compareInput.addEventListener('mousedown', setMouseStep)
    })
</script>

Text

html

<div class="x-compare rounded w-fit accent-dark">
    <input type="range" step="0.1" aria-hidden="true" data-action="compareInput">
    <div class="x-button circle" aria-hidden="true">
        <svg class="size-6" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" fill="none">
            <path class="-translate-x-1.5 scale-75 origin-center" stroke-linecap="round" stroke-linejoin="round" d="M15.75 19.5 8.25 12l7.5-7.5" />
            <path class="translate-x-1.5 scale-75 origin-center" stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
        </svg>
    </div>
    <div class="x-image">
        <div class="bg-primary text-light text-9xl font-black grid place-content-center p-6">PRIMARY</div>
        <div class="bg-main text-body text-9xl font-black grid place-content-center p-6">PRIMARY</div>
    </div>
</div>

js

<script type="module">
    import { setPosition, setKeyboardStep, setMouseStep } from 'winduum/src/components/compare/index.js'

    document.querySelectorAll('[data-action="compareInput"]').forEach(compareInput => {
        compareInput.addEventListener('input', setPosition)

        compareInput.addEventListener('keydown', setKeyboardStep)

        compareInput.addEventListener('mousedown', setMouseStep)
    })
</script>

Javascript API

setPosition

• Type: (element: HTMLInputElement, options?: SetPositionOptions) => void
• Kind: sync

SetPositionOptions

---

selector

• Type: string
• Default: .x-compare

---

positionProperty

• Type: string
• Default: --x-compare-position

---

setKeyboardStep

• Type: (element: HTMLInputElement, key: string, step?: number) => void
• Kind: sync

setMouseStep

• Type: (element: HTMLInputElement, step?: number) => void
• Kind: sync