VueJS、JavaScript实现range滑块禁止输入值低于当前已设置值

核心逻辑 #

不需要修改v-model的原有绑定逻辑，只需要在滑块的input/change事件触发时做值的拦截：每次新值小于上一次记录的最小值（也就是滑块当前的历史最高值）时，直接把值重置为最小值即可。

Vue 代码示例（基于v-model绑定） #

<template>
  <!-- range 滑块绑定v-model，监听input事件做拦截 -->
  <input 
    type="range" 
    min="0" 
    max="100" 
    v-model="sliderValue" 
    @input="handleSliderInput"
  >
</template>

<script setup>
import { ref, watch } from 'vue'
// 滑块绑定值
const sliderValue = ref(0)
// 记录允许的最小值（即滑块已经达到过的最高值，不允许回退）
const minAllowedValue = ref(0)

// 监听滑块值变化，更新允许的最小值，同时执行业务计算
watch(sliderValue, (newVal, oldVal) => {
  if (newVal > minAllowedValue.value) {
    minAllowedValue.value = newVal
  }
  // 这里可以直接写入你原有的大量计算逻辑，newVal为最新有效值，oldVal为修改前的历史值
}, { immediate: true })

// 滑块拖动时的拦截逻辑
const handleSliderInput = () => {
  if (sliderValue.value < minAllowedValue.value) {
    sliderValue.value = minAllowedValue.value
  }
}
</script>

逻辑说明 #

• minAllowedValue 用来存储滑块已经到达过的最高值，相当于要求的「当前值下限」，只会随着滑块拖动变大，不会变小
• 拖动滑块时input事件实时触发，只要新值低于下限就立刻重置，用户不会看到滑块回退的抖动
• 原有v-model绑定完全保留，之前的计算逻辑不需要做任何修改，直接用sliderValue的最新值即可
• 如果需要同时拿到历史当前值和新值，可以在watch回调里取oldVal和newVal两个参数使用

原生JS实现参考（无框架） #

如果不用Vue，也可以用原生逻辑实现：

const slider = document.querySelector('input[type="range"]')
let minAllowed = slider.value
slider.addEventListener('input', () => {
  if (slider.value < minAllowed) {
    slider.value = minAllowed
    return
  }
  minAllowed = slider.value
  // 后续计算逻辑
})

内容的提问来源于stack exchange，提问作者Pei Hao Chan