range-appearance-basic.html | Explore in Territory

<!DOCTYPE html>
<meta name="color-scheme" content="light dark">
<script src="../../../../resources/run-after-layout-and-paint.js"></script>
<script src="../../resources/common.js"></script>
<body>
<style>
  #vertical {
    writing-mode: vertical-lr;
    -webkit-appearance: auto;
  }

  #no-appearance {
    -webkit-appearance: none;
  }
  #no-appearance::-webkit-slider-thumb {
    -webkit-appearance: none;
  }
</style>

<!-- no style for reference -->
<ul>
  <li>Range: <input type="range" /><input value=0 type="range" /><input value=100 type="range" /></li>
</ul>

<ul>
  <li>Range value=30: <input type="range" value="30"/></li>
</ul>

<ul>
    <li>Range webkit-appearance:none: <input type="range" id="no-appearance"/></li>
</ul>

<ul>
  <li>Range vertical RTL: <input type="range" value="30" id="vertical" style="direction: rtl" />LTR: <input type="range" value="30" id="vertical" style="direction: ltr" /></li>
</ul>

<!-- disabled -->
<ul>
  <li>Range disabled: <input type="range" disabled/></li>
</ul>

<!-- hover -->
<ul>
  <li>Range hover: <input type="range" id="hoverTarget"/></li>
</ul>

<!-- datalist -->
<ul>
  <li>Range datalist: <input type="range" min="0" max="100" list="number" /></li>
  <li>Range datalist disabled: <input type="range" min="0" max="100" list="number" disabled /></li>
  <datalist id="number">
    <option>10</option>
    <option>30</option>
    <option>50</option>
    <option>70</option>
    <option>90</option>
  </datalist>
</ul>

<!-- zoom -->
<ul>
  <li>Range zoom: 3: <input type="range" style="zoom: 3;"/></li>
  <li><input type="range" value=0 style="zoom: 3;" /></li>
</ul>

<script>

runAfterLayoutAndPaint(function() {
  var target = document.getElementById('hoverTarget');
  hoverOverElement(target);
}, true);

</script>

</body>
chromium/third_party/blink/web_tests/fast/forms/color-scheme/range/range-appearance-basic.html
