A Pen by Josh Rutherford.

Flat-Range-Sliders.markdown

Flat Range Sliders

A Pen by Josh Rutherford on CodePen.

License.

index.html

<form>
  <p>Flat Range Sliders</p>
  <input type="range" value="50"/>
  <input type="range" value="0"/>
  <input type="range" value="0"/>
</form>

style.css

html{
  background:#e74c3c;
}

form{
  width:260px;
  height:260px;
  margin:0 auto;
}

input[type="range"]{
  -webkit-appearance:none;
  width:160px;
  height:20px;
  margin:10px 50px;
  background: linear-gradient(to right, #9A2720 0%, #9A2720 100%);
  background-size:150px 10px;
  background-position:center;
  background-repeat:no-repeat;
  overflow:hidden;
}

input[type="range"]:first-of-type{
  margin-top:30px;
}

input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:20px;
  height:20px;
  background:#F26B5E;
  position:relative;
  z-index:3;
  box-shadow:0 0 5px 0 rgba(0,0,0,0.3);
}

input[type="range"]::-webkit-slider-thumb:after{
  content:" ";
  width:160px;
  height:10px;
  position:absolute;
  z-index:1;
  right:20px;
  top:5px;
  background: #ff5b32;
  background: linear-gradient(to right, #f088fc 1%, #AC6CFF 70%);
}

p{
  width:100%;
  text-align:center;
  color:white;
  font-family: 'HelveticaNeue-UltraLight', 'Helvetica Neue UltraLight', Roboto, Arial, Sans-serif;
  font-size:32px;
  margin-top:30px;
}