<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Kole UI · NumberRangeInput（普通 H5）</title>
  <link rel="stylesheet" href="../.design_library/kole-ui/colors_and_type.css" />
  <link rel="stylesheet" href="NumberRangeInput.css" />
  <style>body{margin:0;padding:24px;background: var(--kole-color-page-bg);}</style>
</head>
<body>
  <div class="kole-numrange" role="group" id="app">
    <input type="number" id="min" placeholder="最小" />
    <span class="kole-numrange-sep">—</span>
    <input type="number" id="max" placeholder="最大" />
    <span class="kole-numrange-unit">元</span>
    <span class="kole-numrange-msg" role="group" id="msg"></span>
  </div>

  <script>
    var root = document.getElementById('app');
    var minEl = document.getElementById('min');
    var maxEl = document.getElementById('max');
    var msg = document.getElementById('msg');
    var STEP = 1, MIN = 0, MAX = 10000;

    function validate() {
      var a = parseFloat(minEl.value);
      var b = parseFloat(maxEl.value);
      var err = '';
      if (minEl.value !== '' && (a < MIN || a > MAX)) err = '最小值需在 ' + MIN + '~' + MAX;
      else if (maxEl.value !== '' && (b < MIN || b > MAX)) err = '最大值需在 ' + MIN + '~' + MAX;
      else if (minEl.value !== '' && maxEl.value !== '' && a > b) err = '最小值不能大于最大值';
      root.classList.toggle('is-error', !!err);
      msg.textContent = err;
      return !err;
    }
    [minEl, maxEl].forEach(function (el) {
      el.addEventListener('input', validate);
      el.addEventListener('blur', function () {
        var v = parseFloat(el.value);
        if (!isNaN(v)) el.value = Math.round(v / STEP) * STEP;
        validate();
      });
    });
  </script>
</body>
</html>
