how to make a custom input range slider : hi i want create a custom slider like shown in image how can i do it please see the fiddle which i have tried.!

[![enter image description here][1]][1]

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    .slider-info {
      display: inline-block;
      width: 120px;
      margin-right: 10px;
      vertical-align: inherit;
    }

<!-- language: lang-html -->

    <h2>working slider input range</h2>
    <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" />
    <output id="Output1">0</output>


    <input name="gdskill[2]" id="gdskill2" type="range" min="0" value="0" max="10" step="1" list="ticks" oninput="Output2.value = gdskill2.value" />
    <output id="Output2">0</output>

    <datalist id="ticks">
      <option>0</option>
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
      <option>5</option>
      <option>6</option>
      <option>7</option>
      <option>8</option>
      <option>9</option>
      <option>10</option>
    </datalist>


    <h2>i want design this like shown in image is it possible..? can anyone helpme with it im little new to css.</h2>

<!-- end snippet -->

  [1]: https://i.stack.imgur.com/0fQ8T.png


Fillde LINK:   https://jsfiddle.net/9qgx71kd/2/