<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>&lt;input type="range"&gt; 示例</title>
  <style>
    html, input {
      font-family: sans-serif;
    }

    body {
      width: 90%;
      max-width: 500px;
      margin: 0 auto;
    }

    form {
      margin-top: 20px;
    }

    div {
      margin-bottom: 20px;
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      align-items: center;
    }

    label, input, button {
      font-size: 14px;
      line-height: 1.5
    }

    label {
      width: 100%;
      margin-right: 2%;
    }

    input {
      flex: auto;
      margin-right: 2%;
    }

    button {
      width: 70%;
      margin: 0 auto;
    }

  </style>
</head>
<body>
  <form>
    <div>
      <label for="price">选择最高房价：</label>
      <input type="range" name="price" id="price" min="50000" max="500000" step="100" value="250000">
      <output class="price-output" for="price"></output>
    </div>
    <div>
      <button>提交</button>
    </div>
  </form>
  <script>
    const price = document.querySelector('#price')
    const output = document.querySelector('.price-output')

    output.textContent = price.value

    price.addEventListener('input', function() {
      output.textContent = price.value
    });
  </script>
</body>
</html>
