W3Schools 尝试编辑器 - W3Schools 中文教程

<!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>

</body>
</html>