Vertical Range Slider

by amindunited

HTML

<template id="vertical-slider">
   <div style="display: inline-block;">
      <div style="text-align:center">
        <input
          type="range"
          class="vertical-range"
          id="env_attack"
          name="env_attack"
          list="values"
          orient="vertical" 
       />
        <!-- Firefox uses this non-standard orient="vertical" -->
      </div>
      <div style="text-align:center">
        <label for="env_attack">Attack</label>
      </div>
   </div>
</template>
<form id="amp_env">
  <div class="env_sliders">
  
  </div>
  <datalist id="values">
    <option value="0" label="0"></option>
    <option value="25" label="25"></option>
    <option value="50" label="50"></option>
    <option value="75" label="75"></option>
    <option value="100" label="100"></option>
  </datalist>
</form>

CSS

.vertical-range {
  appearance: slider-vertical;
  width: 1rem;
}
.env_sliders {
  width: 50vw;
  gap: 1rem;
  justify-content: space-evenly;
  display: flex;
}
#amp_env {
  display: flex;
}

JavaScript

const form = document.querySelector('#amp_env');
form.addEventListener('change', (e) => {
	console.log('change', e, e.target.value)
});

const template = document.querySelector("#vertical-slider");
const adsr = ['a', 'd', 's', 'r'].forEach((letter) => {
	const clone = template.content.cloneNode(true);
  clone.querySelector('label').innerHTML = letter;
  form.querySelector('.env_sliders').appendChild(clone);
})