<input-slider>

What is it?

I made a slider based on the ARIA slider pattern because <input type="range">'s support for customizing the appearance of vertical sliders wasn't good enough for me.

Examples of use

• HTML

  <input-slider step="0.1" value="0.3"></input-slider>

  Output

• HTML

  <input-slider value="0.3" value-text-format="ratio {v}" reversed></input-slider>

  Output

• HTML

  <input-slider orientation="vertical" min="5" max="200" step="1" value="102"></input-slider>

  Output

• HTML

  <form>
    <input-slider name="slider" orientation="vertical" reversed min="-100" max="5" step="5" value="-52"></input-slider>
  </form>

  Output

...