HTML CSS
(quick & simple example)
LITERALLY JUST A RANGE INPUT WITH CSS CLASS <input type="range" class="cRange"/>
input[type=range].cRange { appearance: none; outline: none; border: none; box-shadow: none; }
.cRange::-webkit-slider-thumb { appearance: none; }
input[type=range].cRange { box-sizing: border-box; width: 200px; padding: 20px; background: #f4f4f4; }
input[type=range]::-webkit-slider-runnable-track { background: #ade8ff; }
input[type=range]::-moz-range-track { background: #ade8ff; }
.cRange::-webkit-slider-thumb { width: 16px; height: 16px; background: #d6302d; }
.cRange::-moz-range-thumb { width: 16px; height: 16px; background: #d6302d; }