title: How to make a custom input range slider
body: <p>I want to create a custom slider like shown in the image. How can I do this? Please see the fiddle which I have linked so that you can see what I have already tried.</p>
  
  <p><a href="https://i.stack.imgur.com/0fQ8T.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0fQ8T.png" alt="enter image description here"></a></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-html lang-html prettyprint-override"><code>&lt;h2&gt;working slider input range&lt;/h2&gt;
  &lt;input class="slider-info" name="gdskill[1]" id="gdskill1" type="range" min="0" value="0" max="10" step="1" list="ticks" oninput="Output1.value = gdskill1.value" /&gt;
  &lt;output id="Output1"&gt;0&lt;/output&gt;
  
  
  &lt;input name="gdskill[2]" id="gdskill2" type="range" min="0" value="0" max="10" step="1" list="ticks" oninput="Output2.value = gdskill2.value" /&gt;
  &lt;output id="Output2"&gt;0&lt;/output&gt;
  
  &lt;datalist id="ticks"&gt;
    &lt;option&gt;0&lt;/option&gt;
    &lt;option&gt;1&lt;/option&gt;
    &lt;option&gt;2&lt;/option&gt;
    &lt;option&gt;3&lt;/option&gt;
    &lt;option&gt;4&lt;/option&gt;
    &lt;option&gt;5&lt;/option&gt;
    &lt;option&gt;6&lt;/option&gt;
    &lt;option&gt;7&lt;/option&gt;
    &lt;option&gt;8&lt;/option&gt;
    &lt;option&gt;9&lt;/option&gt;
    &lt;option&gt;10&lt;/option&gt;
  &lt;/datalist&gt;
  
  
  &lt;h2&gt;I want a design like the one shown in the image above. Is this possible? Can anyone help me with it as I am a little new to CSS.&lt;/h2&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Fiddle link:   <a href="https://jsfiddle.net/9qgx71kd/2/" rel="nofollow noreferrer">https://jsfiddle.net/9qgx71kd/2/</a></p>