Because the range slider looks different on the computer and on the cell phone

Link to the trial application

I have a mobile app that I'm doing with framewrok7 but the range slider that I use looks different in the PC version than the mobile version.

Basically it is the circle or element that determines the position of the slider what is not seen.

<div class="item-input">
              <div class="range-slider">
                <h2  id='Peso1' >Peso:</h2>  
                <h2  id='Peso1' >Aqui debe ir el peso * power:</h2>  
                  <input type="range" oninput="mouseDown(); "  min="3.5" max="50" value="12.5" step ="0.50" >
                </div>
          </div>