slider reset

This commit is contained in:
ArneBo 2025-03-27 10:54:12 +01:00
parent bfc7458131
commit 753e1f31e3
1 changed files with 6 additions and 5 deletions

View File

@ -83,7 +83,7 @@ onMounted(() => {
ref="input" ref="input"
v-model="index" v-model="index"
type="range" type="range"
style="width: var(--slider-width); opacity: .001;" style="width: var(--slider-width);"
:max="keys.length - 1" :max="keys.length - 1"
:autofocus="autofocus || undefined" :autofocus="autofocus || undefined"
> >
@ -142,11 +142,11 @@ onMounted(() => {
// Fake slider // Fake slider
.range { .range {
width: calc(var(--step-size) * var(--current-step)); width: calc(var(--step-size) * var(--current-step));
border-bottom: 2px solid currentcolor;
position: absolute; position: absolute;
top: 11px; top: 11px;
transition: all .1s; transition: all .1s;
pointer-events: none; pointer-events: none;
background-color: var(--fw-primary);
} }
input:focus~.range { input:focus~.range {
// focused style // focused style
@ -155,10 +155,11 @@ onMounted(() => {
border-radius: 8px; border-radius: 8px;
width: 16px; width: 16px;
height: 16px; height: 16px;
left: calc(var(--step-size) * var(--current-step)); left: calc(var(--step-size) * var(--current-step) + 2px);
background: currentcolor; border: 2px solid var(--fw-primary);
background-color: var(--fw-primary);
position: absolute; position: absolute;
top: 4px; top: 2px;
transition: all .1s; transition: all .1s;
pointer-events: none; pointer-events: none;
} }