HTML CSS

SIMPLE CUSTOM HTML RANGE SLIDER

(quick & simple example)

LITERALLY JUST A RANGE INPUT WITH CSS CLASS <input type="range" class="cRange"/>

CUSTOM RANGE SLIDER HTML

01

input[type=range].cRange {   appearance: none; outline: none;   border: none; box-shadow: none; }

HIDE ORIGINAL SLIDER

02

.cRange::-webkit-slider-thumb { appearance: none; }

input[type=range].cRange {   box-sizing: border-box;   width: 200px;   padding: 20px;   background: #f4f4f4; }

CUSTOM OUTSIDE BOX

03

input[type=range]::-webkit-slider-runnable-track { background: #ade8ff; }

CUSTOM SLIDER TRACK

04

input[type=range]::-moz-range-track { background: #ade8ff; }

.cRange::-webkit-slider-thumb {   width: 16px; height: 16px;   background: #d6302d; }

CUSTOM SLIDER BUTTON

05

.cRange::-moz-range-thumb {   width: 16px; height: 16px;   background: #d6302d; }