Slider (Editor's Draft)

Implementations

DOM structure

<label for="default-slider">Default range slider:</label>
<input
  id="default-slider"
  type="range"
  min="0"
  max="30"
  value="5"
  onChange="handleChange(event)"
  aria-valuetext="5 degrees"
/>
<label for="vertical-slider">Vertical range slider:</label>
<input
  id="vertical-slider"
  type="range"
  min="0"
  max="30"
  value="5"
  class="vertical"
  aria-orientation="vertical"
  onChange="handleChange(event)"
  aria-valuetext="5 degrees"
/>

DOM structure

<div class="aria-widget-vertical-slider">
  <div id="idTemp" class="label">
    Temperature
  </div>
  <div id="idTempValue" class="value">
    0
  </div>
  <div class="rail" style="height: 200px">
    <div
      id="idTempThumb"
      role="slider"
      tabindex="0"
      class="thumb"
      aria-valuemin="50"
      aria-valuenow="68"
      aria-valuemax="100"
      aria-labelledby="idTemp"
      data-keydown="true"
    ></div>
  </div>
</div>

DOM structure

<span class="MuiSlider-root MuiSlider-colorPrimary">
  <span class="MuiSlider-rail"></span>
  <span class="MuiSlider-track" style="left: 0%; width: 89%;"></span>
  <input type="hidden" value="89" />
  <span
    class="MuiSlider-thumb MuiSlider-thumbColorPrimary MuiSlider-active"
    tabindex="0"
    role="slider"
    style="left: 89%;"
    data-index="0"
    aria-labelledby="continuous-slider"
    aria-orientation="horizontal"
    aria-valuemax="100"
    aria-valuemin="0"
    aria-valuenow="89"
    data-keydown="true"
  ></span>
</span>

DOM structure

<div
  id="Slider305"
  aria-valuenow="7"
  aria-valuemin="0"
  aria-valuemax="10"
  aria-valuetext="7"
  aria-disabled="false"
  class="ms-Slider-slideBox ms-Slider-showValue slideBox-343"
  role="slider"
  tabindex="0"
  data-is-focusable="true"
  data-keydown="true"
>
  <div class="ms-Slider-line line-345">
    <span class="ms-Slider-thumb thumb-456" style="left: 68.8596%;"></span>
    <span
      class="lineContainer-346 ms-Slider-active activeSection-457"
      style="width: 68.8596%;"
    ></span>
    <span
      class="lineContainer-346 ms-Slider-inactive inactiveSection-458"
      style="width: 31.1404%;"
    ></span>
  </div>
</div>

DOM structure

<div class="ui-slider">
  <div class="ui-slider__input-wrapper">
    <span class="ui-slider__rail"></span>
    <span class="ui-slider__track" style="width: 62%;"></span>
    <input
      class="ui-box ui-slider__input"
      aria-orientation="horizontal"
      aria-valuemin="100"
      aria-valuemax="100"
      aria-valuenow="62"
      aria-valuetext="62"
      min="0"
      max="100"
      step="1"
      type="range"
      value="62"
    />
    <span class="ui-slider__thumb" style="left: 62%;"></span>
  </div>
</div>

Test runs