Get your own website Result Size: 625 x 565
x
 
<!DOCTYPE html>
<html>
<head>
  <title>Range Watcher</title>
  <style>
    #app {
      border: dashed black 1px;
      display: inline-block;
      padding: 10px;
    }
    #app > p {
      font-size: large;
      font-weight: bold;
      text-align: center;
    }
  </style>
</head>
<body>
<h1>Example: Range Watcher</h1>
<p>A watcher is used for the 'rangeVal' value so that values between 20 and 60 are not possible to choose.</p>
<div id="app">
  <input type="range" min="0" max="100" step="1" v-model="rangeVal">
  <p><code>{{ rangeVal }}</code></p> 
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        rangeVal: 70
      }
    },
    watch: {
      rangeVal(val) {
        if( val>20 && val<60 ){
          if(val<40){
            this.rangeVal = 20;
          }
          else{
            this.rangeVal = 60;
          }
        }
      }