Eclypsed
53 lines
1.7 KiB
Svelte
53 lines
1.7 KiB
Svelte
<script>
|
|
export let value = 0
|
|
|
|
let sliderTrail, sliderThumb
|
|
|
|
const trackThumb = (sliderPos) => {
|
|
if (sliderThumb) sliderThumb.style.left = `${sliderPos}%`
|
|
if (sliderTrail) sliderTrail.style.right = `${100 - sliderPos}%`
|
|
}
|
|
|
|
$: trackThumb(value)
|
|
|
|
const handleKeyPress = (key) => {
|
|
if ((key === 'ArrowRight' || key === 'ArrowUp') && value < 100) return (value += 1)
|
|
if ((key === 'ArrowLeft' || key === 'ArrowDown') && value > 0) return (value -= 1)
|
|
}
|
|
</script>
|
|
|
|
<div
|
|
id="slider-track"
|
|
class="relative isolate h-1 w-full rounded-full bg-neutral-600"
|
|
role="slider"
|
|
tabindex="0"
|
|
aria-valuenow={value}
|
|
aria-valuemin="0"
|
|
aria-valuemax="100"
|
|
on:keydown={(event) => handleKeyPress(event.key)}
|
|
>
|
|
<input type="range" class="absolute z-10 h-1 w-full" step="any" min="0" max="100" bind:value tabindex="-1" aria-hidden="true" aria-disabled="true" />
|
|
<span bind:this={sliderTrail} id="slider-trail" class="absolute left-0 h-1 rounded-full bg-white transition-colors" />
|
|
<span bind:this={sliderThumb} id="slider-thumb" class="absolute top-1/2 aspect-square h-3 -translate-x-1/2 -translate-y-1/2 rounded-full bg-white opacity-0 transition-opacity duration-300" />
|
|
</div>
|
|
|
|
<style>
|
|
input[type='range'] {
|
|
appearance: none;
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
}
|
|
#slider-track:hover > #slider-trail {
|
|
background-color: var(--lazuli-primary);
|
|
}
|
|
#slider-track:focus > #slider-trail {
|
|
background-color: var(--lazuli-primary);
|
|
}
|
|
#slider-track:hover > #slider-thumb {
|
|
opacity: 1;
|
|
}
|
|
#slider-track:focus > #slider-thumb {
|
|
opacity: 1;
|
|
}
|
|
</style>
|