diff --git a/src/components/Settings/components/Appearance.vue b/src/components/Settings/components/Appearance.vue
index 1c7e000b..d37b9d21 100644
--- a/src/components/Settings/components/Appearance.vue
+++ b/src/components/Settings/components/Appearance.vue
@@ -159,13 +159,13 @@ function changeWallpaper(url: string) {
     <Radio v-model="settings.enableWallpaperMasking" />
   </SettingItem>
   <SettingItem v-if="settings.enableWallpaperMasking" :title="$t('settings.wallpaper_mask_opacity')">
-    <Slider v-model:value="settings.wallpaperMaskOpacity" :label="`${settings.wallpaperMaskOpacity}%`" />
+    <Slider v-model="settings.wallpaperMaskOpacity" :label="`${settings.wallpaperMaskOpacity}%`" />
   </SettingItem>
   <SettingItem v-if="settings.enableWallpaperMasking" :title="$t('settings.wallpaper_blur_intensity')">
     <template #desc>
       <span color="$bew-warning-color">{{ $t('common.performance_impact_warn') }}</span>
     </template>
-    <Slider v-model:value="settings.wallpaperBlurIntensity" :min="0" :max="60" :label="`${settings.wallpaperBlurIntensity}px`" />
+    <Slider v-model="settings.wallpaperBlurIntensity" :min="0" :max="60" :label="`${settings.wallpaperBlurIntensity}px`" />
   </SettingItem>
 </template>
 
diff --git a/src/components/Settings/components/SearchPage.vue b/src/components/Settings/components/SearchPage.vue
index f88dc085..afeb0452 100644
--- a/src/components/Settings/components/SearchPage.vue
+++ b/src/components/Settings/components/SearchPage.vue
@@ -214,13 +214,13 @@ function changeWallpaper(url: string) {
       <Radio v-model="settings.searchPageEnableWallpaperMasking" />
     </SettingItem>
     <SettingItem v-if="settings.searchPageEnableWallpaperMasking" :title="$t('settings.wallpaper_mask_opacity')">
-      <Slider v-model:value="settings.searchPageWallpaperMaskOpacity" :label="`${settings.searchPageWallpaperMaskOpacity ?? 0}%`" />
+      <Slider v-model="settings.searchPageWallpaperMaskOpacity" :label="`${settings.searchPageWallpaperMaskOpacity ?? 0}%`" />
     </SettingItem>
     <SettingItem v-if="settings.searchPageEnableWallpaperMasking" :title="$t('settings.wallpaper_blur_intensity')">
       <template #desc>
         <span color="$bew-warning-color">{{ $t('common.performance_impact_warn') }}</span>
       </template>
-      <Slider v-model:value="settings.searchPageWallpaperBlurIntensity" :min="0" :max="60" :label="`${settings.searchPageWallpaperBlurIntensity ?? 0}px`" />
+      <Slider v-model="settings.searchPageWallpaperBlurIntensity" :min="0" :max="60" :label="`${settings.searchPageWallpaperBlurIntensity ?? 0}px`" />
     </SettingItem>
   </template>
 </template>
diff --git a/src/components/Slider.vue b/src/components/Slider.vue
index 2dbad6fa..84471e50 100644
--- a/src/components/Slider.vue
+++ b/src/components/Slider.vue
@@ -4,7 +4,7 @@ import type { Ref } from 'vue'
 interface Props {
   min?: number
   max?: number
-  value: number
+  modelValue: number
   label: string
 }
 const props = withDefaults(defineProps<Props>(), {
@@ -12,23 +12,23 @@ const props = withDefaults(defineProps<Props>(), {
   max: 100,
 })
 
-const emit = defineEmits(['update:value'])
+const emit = defineEmits(['update:modelValue'])
 
-const modelValue = ref<number>(props.value)
-const rangeRef = ref<HTMLElement>() as Ref<HTMLElement>
+const modelValue = ref<number>(props.modelValue)
+const rangeRef = ref<HTMLInputElement>() as Ref<HTMLInputElement>
 
 onMounted(() => {
-  modelValue.value = props.value
-  const progress = (modelValue.value / rangeRef.value!.max) * 100
+  modelValue.value = props.modelValue
+  const progress = (modelValue.value / Number(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 tempSliderValue = Number((event.target as HTMLInputElement).value)
+      emit('update:modelValue', Number(tempSliderValue))
 
-      const progress = (tempSliderValue / rangeRef.value!.max) * 100
+      const progress = (tempSliderValue / Number(rangeRef.value.max)) * 100
 
       rangeRef.value.style.background = `linear-gradient(to right, var(--bew-theme-color) ${progress}%, var(--bew-fill-1) ${progress}%) no-repeat`
     })
@@ -40,7 +40,7 @@ onMounted(() => {
   <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"
+      v-model="modelValue" type="range" :min="min" :max="max" 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>