Playing with Shadow DOM

Trying to style the range slider

by agrajm

HTML

<input type="range" />

CSS

input[type=range]{
    -webkit-appearance:none;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance:none;
    height:12px;
    width:12px;
    border-radius:6px;
    background:yellow;
    position:relative;
    top:-5px;
}
input[type=range]::-webkit-slider-runnable-track {
    background:red;    
    height:2px;
}