Slider with color track

by secretgspot

HTML

<input type="range" />

CSS

body { padding: 50px; background: #444; }

input[type="range"] {
    -webkit-appearance: none;
    width: 200px;
    height: 10px;
    background-color: #666;
    cursor: ew-resize;
    overflow: hidden;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    background: #fff;
    box-shadow: -205px 0 0 200px hsl(100,100%,40%);
}