material-slider

<!-- single thumb -->
<material-slider min="0" max="100" value="50"></material-slider>

<!-- discrete with stops + custom label -->
<material-slider discrete step="25" value="50" id="vol"></material-slider>
<script>
  document.getElementById('vol').valueFormatter = v => v + '%';
</script>

<!-- centered (active grows from origin, not from min) -->
<material-slider min="-50" max="50" origin="0" value="-20"></material-slider>

<!-- two-thumb range -->
<material-slider value-low="20" value-high="70"></material-slider>

<!-- five sizes: xs | s (default) | m | l | xl -->
<material-slider size="xl" value="80"></material-slider>

<!-- vertical orientation -->
<material-slider orientation="vertical" value="30"></material-slider>

<!-- inset icon (M / L / XL only) -->
<material-slider size="m" icon="volume_up" value="35"></material-slider>

<!-- form-associated; range submits the same name twice -->
<form>
  <material-slider name="volume" value="75"></material-slider>
  <material-slider name="price"  value-low="100" value-high="350"></material-slider>
</form>

<!-- events -->
<!-- valueChange:  fires continuously while pointer drags / keys repeat -->
<!-- valueCommit: fires once on pointer release / each keystroke -->