<div class="container">
    <div class="slider" tabindex="0">
        <div class="indicator"></div>
        <div class="icon-container">
            <svg
                xmlns="http://www.w3.org/2000/svg"
                width="40"
                height="40"
                viewBox="0 0 24 24"
                fill="none"
                stroke="#101417"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                class="icon"
            >
                <circle cx="12" cy="12" r="4" stroke="#101417" fill="#101417" />
                <path d="M12 3v1" />
                <path d="M12 20v1" />
                <path d="M3 12h1" />
                <path d="M20 12h1" />
                <path d="m18.364 5.636-.707.707" />
                <path d="m6.343 17.657-.707.707" />
                <path d="m5.636 5.636.707.707" />
                <path d="m17.657 17.657.707.707" />
            </svg>
        </div>
    </div>
</div>

<script type="module">
    import {
        animate,
        clamp,
        mix,
        progress as calcProgress,
        motionValue,
        mapValue,
        transformValue,
        styleEffect,
    } from "https://cdn.jsdelivr.net/npm/motion@12.16.0/+esm"

    /**
     * ==============   Configuration   ================
     */
    const maxPull = 20
    const maxSquish = 0.92
    const maxStretch = 1.08
    const keyboardStep = 0.05
    const keyboardSpring = { stiffness: 200, damping: 60 }

    /**
     * ==============   State   ================
     */
    const slider = document.querySelector(".slider")
    const progress = motionValue(0.5)
    let size = { top: 0, bottom: 0 }
    let initialDragY = 0
    let initialProgressY = 0
    let isFocused = false

    /**
     * ==============   Animation   ================
     */
    // Event listeners
    slider.addEventListener("pointerdown", onTapStart)
    slider.addEventListener("focus", onFocus)
    slider.addEventListener("blur", onBlur)
    document.addEventListener("pointermove", onPointerMove)
    document.addEventListener("pointerup", onPointerUp)
    document.addEventListener("pointercancel", onPointerUp)

    // Pointer event handlers
    function onTapStart(e) {
        progress.stop()

        const rect = slider.getBoundingClientRect()
        size.top = rect.top
        size.bottom = rect.bottom

        initialDragY = e.clientY
        initialProgressY = mix(size.bottom, size.top, progress.get())

        slider.classList.add("active")
        slider.setPointerCapture(e.pointerId)
    }

    function onPointerMove(e) {
        if (!slider.hasPointerCapture(e?.pointerId)) return

        const dragOffset = e.clientY - initialDragY
        const newProgressY = initialProgressY + dragOffset

        progress.set(calcProgress(size.bottom, size.top, newProgressY))
    }

    function onPointerUp(e) {
        if (!slider.hasPointerCapture(e?.pointerId)) return

        slider.releasePointerCapture(e.pointerId)
        slider.classList.remove("active")

        // Animate back to bounds if needed
        if (progress.get() < 0) {
            animate(progress, 0, {
                type: "spring",
                stiffness: 200,
                damping: 60,
            })
        } else if (progress.get() > 1) {
            animate(progress, 1, {
                type: "spring",
                stiffness: 200,
                damping: 60,
            })
        }
    }

    // Keyboard event handlers
    function onFocus() {
        progress.stop()
        isFocused = true
        document.addEventListener("keydown", onKeyDown)
    }

    function onBlur() {
        isFocused = false
        document.removeEventListener("keydown", onKeyDown)
    }

    function onKeyDown(e) {
        if (e.key !== "ArrowUp" && e.key !== "ArrowDown") return

        progress.stop()
        let current = clamp(0, 1, progress.get())

        if (current <= 0.04) current = 0
        if (current >= 0.96) current = 1

        const newProgress =
            current + (e.key === "ArrowUp" ? keyboardStep : -keyboardStep)

        if (newProgress > 1) {
            animate(progress, 1, {
                velocity: 20,
                type: "spring",
                stiffness: keyboardSpring.stiffness,
                damping: keyboardSpring.damping,
            })
        } else if (newProgress < 0) {
            animate(progress, 0, {
                velocity: -20,
                type: "spring",
                stiffness: keyboardSpring.stiffness,
                damping: keyboardSpring.damping,
            })
        } else {
            progress.set(clamp(0, 1, newProgress))
        }
    }

    /**
     * ==============   Effects  ================
     */
    const y = mapValue(progress, [-1, 0, 1, 2], [maxPull, 0, 0, -maxPull])
    const scaleX = mapValue(
        y,
        [-maxPull, 0, 0, maxPull],
        [maxSquish, 1, 1, maxSquish]
    )
    const scaleY = mapValue(
        y,
        [-maxPull, 0, 0, maxPull],
        [maxStretch, 1, 1, maxStretch]
    )

    styleEffect(slider, { y, scaleX, scaleY })

    styleEffect(".indicator", {
        scaleY: transformValue(() => clamp(0, 1, progress.get())),
    })

    const invertScaleX = transformValue(() => 1 / scaleX.get())
    const invertScaleY = transformValue(() => 1 / scaleY.get())
    styleEffect(".icon-container", {
        scaleX: invertScaleX,
        scaleY: invertScaleY,
    })
</script>

<style>
    .container {
        width: 400px;
        height: 300px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(2px);
    }

    .slider {
        width: 100px;
        height: 225px;
        background-color: rgba(255, 255, 255, 0.1);
        border-radius: 40px;
        overflow: hidden;
        position: relative;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        touch-action: none;
        outline: none;
        cursor: pointer;
        will-change: transform;
        box-shadow: 0px 0px 0px 4px #0d63f800;
        transition: box-shadow 0.15s;
    }

    .slider:focus-visible {
        box-shadow: 0px 0px 0px 4px #0d63f8ff;
    }

    .indicator {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background-color: #f5f5f5;
        transform-origin: center bottom;
        pointer-events: none;
        will-change: transform;
        transform: scaleY(0.5);
    }

    .icon-container {
        position: relative;
        z-index: 1;
        will-change: transform;
    }

    .icon {
        position: relative;
        z-index: 1;
        bottom: 20px;
        pointer-events: none;
    }
</style>