<link href='https://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>
<!--Header-->  
<span class="borderBottom"></span>
<h1>Themed Price Rangers</h1>
<span class="borderTop"></span>

<!--Form Container-->  
<div class="form">
  <form>
    <div class="range1">
    <label for="range" class="label">Price Range</label>
    <input type="range" name="range" min="0" max="2500" step="50" value="500">
    <output for="range" class="output"></output>
    </div>
    <div class="range2">
    <label for="range" class="label">Price Range</label>
    <input type="range" name="range1" min="0" max="2500" step="50" value="1000">
    <output for="range1" class="output2"></output>
    </div>
    <div class="range3">
    <label for="range" class="label">Price Range</label>
    <input type="range" name="range2" min="0" max="2500" step="50" value="1500">
    <output for="range2" class="output3"></output>
    </div>
  </form>

</div>

/***************************
RESET
****************************/
*{
  list-style:none;
}

/***************************
BODY
****************************/
body{
  background:#222;
  position:relative;
}

/***************************
TYPOGRAPHY
****************************/
h1{
  font:20px Oswald;
  text-transform:uppercase;
  color:#666;
  font-weight:700;
  text-shadow:#000 0px 1px;
  border-top:1px solid #000;
  border-bottom:1px solid #3A3A3A;
  padding:10px 0px 10px 0px;
  text-align:center;
  text-shadow:#000 0px 1px 2px;
}

/***************************
BORDERS
****************************/
.borderBottom{
  display:block;
  width:100%;
  height:1px;
  border-top:1px solid #000;
  position:absolute;
  top:50px;
}

.borderBottom2{
  display:block;
  width:100%;
  height:1px;
  border-top:1px solid #000;
  position:absolute;
  top:112px;
}

.borderTop{
  display:block;
  width:100%;
  height:1px;
  border-top:1px solid #3A3A3A;
  position:absolute;
  top:1px;
}

.borderTop2{
  display:block;
  width:100%;
  height:1px;
  border-top:1px solid #3A3A3A;
  position:absolute;
  top:72px;
}

/***************************
FORM
****************************/
.form{
  width:500px;
  margin-top:10px;
  margin:0 auto;
  position:relative;
}

.label{
  display:block;
  font:14px Oswald;
  text-transform:uppercase;
  color:#666;
  font-weight:700;
  text-shadow:#000 0px 1px 2px;
}

/*The Range Bar*/
input[type="range"]{
  -webkit-appearance:none;
  width:100%;
  padding:2px;
  margin-top:10px;
  box-shadow: inset 4px 6px 10px -4px rgba(0,0,0,0.3), 0 1px 1px -1px rgba(255,255,255,0.3);
  background: rgba(0,0,0,0.2);
  overflow:hidden;
  outline:none;
  border:1px solid rgba(0,0,0,0.7);
}

/*The Range Dial*/
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:20px;
  height:20px;
  background:#333;
  position:relative;
  z-index:3;
  box-shadow: inset 4px 6px 10px -4px rgba(0,0,0,0.3), 0 1px 1px -1px rgba(255,255,255,0.3); 
}

input[type="range"]::-webkit-slider-thumb:hover{
  cursor:pointer;
}

input[name="range"]::-webkit-slider-thumb:after{
  content:" ";
  width:1000px;
  height:100%;
  position:absolute;
  z-index:1;
  right:22px;
  top:0px;
background: rgb(116,252,250); /* Old browsers */
background: -moz-linear-gradient(top, rgba(116,252,250,1) 0%, rgba(89,205,247,1) 50%, rgba(54,200,237,1) 52%, rgba(34,244,230,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(116,252,250,1)), color-stop(50%,rgba(89,205,247,1)), color-stop(52%,rgba(54,200,237,1)), color-stop(100%,rgba(34,244,230,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(116,252,250,1) 0%,rgba(89,205,247,1) 50%,rgba(54,200,237,1) 52%,rgba(34,244,230,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(116,252,250,1) 0%,rgba(89,205,247,1) 50%,rgba(54,200,237,1) 52%,rgba(34,244,230,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(116,252,250,1) 0%,rgba(89,205,247,1) 50%,rgba(54,200,237,1) 52%,rgba(34,244,230,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(116,252,250,1) 0%,rgba(89,205,247,1) 50%,rgba(54,200,237,1) 52%,rgba(34,244,230,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#74fcfa', endColorstr='#22f4e6',GradientType=0 ); /* IE6-9 */ 
}


input[name="range1"]::-webkit-slider-thumb:after{
  content:" ";
  width:1000px;
  height:100%;
  position:absolute;
  z-index:1;
  right:22px;
  top:0px;
background: rgb(59,103,158); /* Old browsers */
background: -moz-linear-gradient(top, rgba(59,103,158,1) 0%, rgba(43,136,217,1) 50%, rgba(32,124,202,1) 51%, rgba(125,185,232,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(59,103,158,1)), color-stop(50%,rgba(43,136,217,1)), color-stop(51%,rgba(32,124,202,1)), color-stop(100%,rgba(125,185,232,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(59,103,158,1) 0%,rgba(43,136,217,1) 50%,rgba(32,124,202,1) 51%,rgba(125,185,232,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */
}

input[name="range2"]::-webkit-slider-thumb:after{
  content:" ";
  width:1000px;
  height:100%;
  position:absolute;
  z-index:1;
  right:22px;
  top:0px;
background: rgb(203,96,179); /* Old browsers */
background: -moz-linear-gradient(top, rgba(203,96,179,1) 0%, rgba(173,18,131,1) 50%, rgba(222,71,172,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(203,96,179,1)), color-stop(50%,rgba(173,18,131,1)), color-stop(100%,rgba(222,71,172,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(203,96,179,1) 0%,rgba(173,18,131,1) 50%,rgba(222,71,172,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cb60b3', endColorstr='#de47ac',GradientType=0 ); /* IE6-9 */
}

.output{
  color:#666;
  font:16px Oswald;
  position:absolute;
  top:0px;
  left:429px;
  text-shadow:#000 0px 1px 2px;
}

.output2{
  color:#666;
  font:16px Oswald;
  position:absolute;
  top:80px;
  left:429px;
  text-shadow:#000 0px 1px 2px;
}

.output3{
  color:#666;
  font:16px Oswald;
  position:absolute;
  top:160px;
  left:429px;
  text-shadow:#000 0px 1px 2px;
}

.range2, .range3{
  margin-top:20px;
}

    $("[name=range]").on("change", function() {
    $("[for=range]").val(this.value +".00  $" );
    }).trigger("change");

    $("[name=range1]").on("change", function() {
    $("[for=range1]").val(this.value +".00  $" );
    }).trigger("change");

    $("[name=range2]").on("change", function() {
    $("[for=range2]").val(this.value +".00  $" );
    }).trigger("change");