title: how to align a slider (input type range) with the text to its right for its value?
body: <p>What would be the simplest way to align a slider with the value of the slider which is on its right? Without using external library. Just using HTML5? Do I need to use CSS for this? How?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>updateTextInput('0');
  
  function updateTextInput(val) {
    document.getElementById('amount').value = val; //update current slider value
    // do other action here
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input type="range" id="rangeInput" name="rangeInput" min="0" max="100" value="0" step="1" oninput="updateTextInput(this.value);"&gt;
  &lt;output name="amount" id="amount" for="rangeInput"&gt;0&lt;/output&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When running the above, the output (on Chrome on windows looks like)</p>
  
  <p><img src="https://i.stack.imgur.com/Hiq2e.png" alt="Mathematica graphics"></p>
  
  <p>You can see the number is not aligned horizontally well with the slider. It should be a little higher.</p>
  
  <p>I know there are many ways to align things in CSS and HTML. But I am not sure with a slider like this what would be the best way to go about it. </p>
  
  <p>ps. sorry do not know how to make a "JSFiddle" yet.</p>