Linked Questions

Popular Questions

write number within a range in input text

Asked by At

I have two text inputs which are linked by their v-model to a ref that is an object, I have two more refs: minimum(100) and maximum(1000) which I am looking for is to be able to write in these inputs between the range of minimum and maximum, but if the value that I write is less than the minimum, it will automatically show the minimum value (100), if it is greater than the maximum, it will show the maximum.

<input type="text" v-model="number.one" class="one" @input="validate"/> 
<input type="text" v-model="number.two" class="two" @input="validate"/>

const min = ref(100)
const max = ref(1000)

const numbers = ref({
   one: 100,
   two: 100
}) 

const validate = () => {
    if(e.target.className === 'one'){
      if(numbers.value.one <= min.value){
         numbers.value.one = min.value
      }else if(numbers.value.one > max.value){
         numbers.value.one = max.value
      }
    }
}


I do this, but from here it no longer lets me write anything in the input, I think I know it's because numbers.value.one is now equal to the minimum so I can't modify it anymore, but how can I change the amounts?

Related Questions