🕹️ Fixes vertical range input

This commit is contained in:
Rune Harlyk
2025-03-07 21:42:38 +01:00
parent d14446d09e
commit 37f9238c55
2 changed files with 156 additions and 151 deletions
@@ -1,34 +1,34 @@
<script lang="ts">
interface Props {
min?: number;
max?: number;
step?: number;
value?: any;
}
interface Props {
min?: number
max?: number
step?: number
value?: any
oninput?: any
}
let {
min = 0,
max = 100,
step = 1,
value = $bindable((max - min) / 2),
...rest
}: Props = $props();
let {
min = 0,
max = 100,
step = 1,
value = $bindable((max - min) / 2),
...rest
}: Props = $props()
</script>
<input
type="range"
style="writing-mode: vertical-lr; direction: rtl"
class="cursor-pointer"
{min}
{max}
{step}
bind:value
{...rest}
/>
type="range"
style="writing-mode: vertical-lr; direction: rtl"
class="cursor-pointer"
{min}
{max}
{step}
bind:value
{...rest} />
<style>
input[type='range']::-webkit-slider-runnable-track {
background: oklch(var(--p) / 1);
border-radius: var(--rounded-box, 1rem);
}
input[type='range']::-webkit-slider-runnable-track {
background: oklch(var(--p) / 1);
border-radius: var(--rounded-box, 1rem);
}
</style>