Actualmente necesito prohibir que el pulgar del control deslizante sea inferior al valor actual
Por ejemplo, si el sliderValue es 40, el usuario no puede deslizarlo a menos de 40. Estoy usando el modelo v para numerosos cálculos, por lo que necesito su valor actual, un nuevo valor y la funcionalidad para no poder deslizar nada menos. que el valor actual
Una forma de lograr esto es usar la funcionalidad de watch de vue. Guardamos el "Valor actual" como un punto de datos y modelamos en v un valor diferente. En este caso lo llamé sliderVal .
Límite dinámico a través de datos
Si observamos sliderVal , podemos evaluar si es más bajo o más alto que el valor "actual" y reaccionar en consecuencia.
<template> <div class="hello"> <label for="slider">{{ sliderVal }}</label> <input type="range" id="slider" v-model="sliderVal" /> </div> </template> <script> export default { name: "HelloWorld", data() { return { limitVal: 0, sliderVal: 0, }; }, watch: { sliderVal(val) { if (Number(val) < Number(this.limitVal)) { this.sliderVal = this.limitVal; } if (Number(val) > Number(this.limitVal)) { this.limitVal = val; } }, }, }; </script>Puede encontrar un ejemplo de trabajo aquí en codeSandbox
Límite de tiempo único a través de Prop
Si desea una versión en la que haya un límite único del valor actual servido a través de prop, la bifurqué para que actúe en consecuencia. Luego tenemos currentVal como accesorio que establece el límite para el pulgar inicialmente, pero no cambiará cuando suba.
<template> <div class="hello"> <label for="slider">{{ sliderVal }}</label> <input type="range" id="slider" v-model="sliderVal" /> </div> </template> <script> export default { name: "HelloWorld", data() { return { sliderVal: 0, }; }, props: { currentVal: { type: Number, required: true, default: 0, }, }, watch: { sliderVal(val) { if (Number(val) < Number(this.currentVal)) { this.sliderVal = this.currentVal; } }, }, created() { this.sliderVal = this.currentVal; }, }; </script>Y aquí está el ejemplo de trabajo