mirror of
https://github.com/BewlyBewly/BewlyBewly.git
synced 2025-04-14 13:15:29 +00:00
d4d66259b8
* style: adjust style of certain components * refactor: refine implementation for wallpaper mask and background effect * feat: add functionality to the top bar logo for returning to the homepage on click
79 lines
2.2 KiB
Vue
79 lines
2.2 KiB
Vue
<script lang="ts" setup>
|
|
import type { Ref } from 'vue'
|
|
|
|
interface Props {
|
|
min?: number
|
|
max?: number
|
|
value: number
|
|
label: string
|
|
}
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
min: 0,
|
|
max: 100,
|
|
})
|
|
|
|
const emit = defineEmits(['update:value'])
|
|
|
|
const modelValue = ref<number>(props.value)
|
|
const rangeRef = ref<HTMLElement>() as Ref<HTMLElement>
|
|
|
|
onMounted(() => {
|
|
modelValue.value = props.value
|
|
const progress = (modelValue.value / rangeRef.value!.max) * 100
|
|
|
|
rangeRef.value.style.background = `linear-gradient(to right, var(--bew-theme-color) ${progress}%, var(--bew-fill-1) ${progress}%) no-repeat`
|
|
|
|
if (rangeRef.value) {
|
|
rangeRef.value.addEventListener('input', (event: Event) => {
|
|
const tempSliderValue = event.target!.value
|
|
emit('update:value', tempSliderValue)
|
|
|
|
const progress = (tempSliderValue / rangeRef.value!.max) * 100
|
|
|
|
rangeRef.value.style.background = `linear-gradient(to right, var(--bew-theme-color) ${progress}%, var(--bew-fill-1) ${progress}%) no-repeat`
|
|
})
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<label cursor-pointer flex items-center gap-3 w="$b-slider-width">
|
|
<input
|
|
ref="rangeRef"
|
|
type="range" :min="min" :max="max" :value="value" class="slider" appearance-none outline-none bg="$bew-fill-1" rounded="$b-slider-height"
|
|
border="size-$b-border-width color-$bew-border-color" w="$b-slider-width" h="$b-slider-height"
|
|
>
|
|
<span>{{ label }}</span>
|
|
</label>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
label {
|
|
--b-border-width: 2px;
|
|
--b-slider-height: 10px;
|
|
--b-slider-width: 100%;
|
|
--b-thumb-width: calc(20px - var(--b-border-width));
|
|
--b-thumb-height: calc(20px - var(--b-border-width));
|
|
}
|
|
|
|
input[type="range"] {
|
|
&::-webkit-slider-thumb {
|
|
--at-apply: appearance-none w-$b-thumb-height h-$b-thumb-height bg-white rounded-$b-thumb-height
|
|
ring-$bew-border-color ring-2 cursor-pointer duration-300;
|
|
}
|
|
|
|
&::-webkit-slider-thumb:hover {
|
|
--at-apply: ring-$bew-theme-color;
|
|
}
|
|
|
|
&::-moz-range-thumb {
|
|
--at-apply: appearance-none w-$b-thumb-height h-$b-thumb-height bg-white rounded-$b-thumb-height
|
|
ring-$bew-border-color ring-2 cursor-pointer duration-300;
|
|
}
|
|
|
|
&::-moz-range-thumb:hover {
|
|
--at-apply: ring-$bew-theme-color;
|
|
}
|
|
}
|
|
</style>
|