77 lines
1.8 KiB
Vue
77 lines
1.8 KiB
Vue
<template>
|
|
<div class="shared-range">
|
|
<label>
|
|
<span>{{ label }}</span>
|
|
<span>{{ model }}</span>
|
|
</label>
|
|
<input
|
|
type="range"
|
|
v-model.number="model"
|
|
:min="min"
|
|
:max="max"
|
|
:step="step"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
label: String,
|
|
min: { type: Number, default: 0 },
|
|
max: { type: Number, default: 1 },
|
|
step: { type: Number, default: 0.1 },
|
|
})
|
|
|
|
const model = defineModel()
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.shared-range {
|
|
label {
|
|
@include label;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
gap: rs(8px);
|
|
opacity: 0.45;
|
|
}
|
|
input[type='range'] {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 100%;
|
|
height: rs(2px);
|
|
background: var(--grey-400);
|
|
border-radius: rs(2px);
|
|
cursor: pointer;
|
|
outline: none;
|
|
|
|
&::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
width: rs(12px);
|
|
height: rs(12px);
|
|
border-radius: 50%;
|
|
background: var(--theme-fg);
|
|
cursor: pointer;
|
|
transition: transform 150ms var(--ease-out-quad);
|
|
}
|
|
|
|
&::-moz-range-thumb {
|
|
width: rs(12px);
|
|
height: rs(12px);
|
|
border-radius: 50%;
|
|
background: var(--theme-fg);
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: transform 150ms var(--ease-out-quad);
|
|
}
|
|
|
|
&:hover {
|
|
&::-webkit-slider-thumb {
|
|
transform: scale(1.3);
|
|
}
|
|
&::-moz-range-thumb {
|
|
transform: scale(1.3);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|