input[type="range"] {
  -webkit-appearance: none;
  margin-right: 15px;
  width: 200px;
  height: 7px;
background-image: url("../../../images/sl.jpg");


  border-radius: 5px;

}

input[type="range"]::-moz-range-thumb {

  height: 30px;
  width: 30px;
  background: none;
border:0px;
background-image: url("../../../images/5.png");
  cursor: ew-resize;

  
}

input[type="range"]::-webkit-range-thumb {

  height: 30px;
  width: 30px;
  background: none;
border:0px;
background-image: url("../../../images/5.png");
  cursor: ew-resize;

  
}

input[type="range"]::-ms-range-thumb {

  height: 30px;
  width: 30px;
  background: none;
border:0px;
background-image: url("../../../images/5.png");
  cursor: ew-resize;

  
}



input[type="range"]::-webkit-slider-thumb:hover {
background-image: url("../../../images/6.png");
}

input[type="range"]::-moz-range-thumb:hover {
background-image: url("../../../images/6.png");
}

input[type="range"]::-ms-thumb:hover {
background-image: url("../../../images/6.png");
}

/* Input Track */
input[type=range]::-webkit-slider-runnable-track  {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}

input[type=range]::-moz-range-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}

input[type="range"]::-ms-track {
  -webkit-appearance: none;
  box-shadow: none;
  border: none;
  background: transparent;
}

input,
output {
  display: inline-block;
  vertical-align: middle;
  font-size: 14px;
  font-family: Arial, sans-serif;
}

output {
background: linear-gradient(107.2deg, rgb(150, 15, 15) 10.6%, rgb(247, 0, 0) 91.1%);
  padding: 7px 15px;
border-radius:4px 4px 4px 4px;

  color: #fff;
}

.put1 {
background-color: #c00;
  padding: 4.5px 7px;
border-radius:4px 0px 0px 4px;
  color: #fff;
}

.input2{

cursor: pointer;
width:20%;
height:30px;
display: inline-block;
  vertical-align: middle;
  font-size: 14px;
color:#fff;
    background-color: #999;
border-radius:0px 4px 4px 0px;

border-right:1px solid #777;
border-top:1px solid #777;
border-left:1px solid #777;
border-bottom:1px solid #777;
}

.input2:hover {
    background-color: #777;
border-right:4px solid #c00;
}

.input2::placeholder {
  
    opacity: 1;
    color: #fff;
}

.input5{

cursor: pointer;
width:7%;
height:30px;
display: inline-block;
  vertical-align: middle;
font-family:tahoma;
  font-size: 17px;
color:#fff;
  background-color: #c00;
border-radius:4px 4px 4px 4px;

border:0px solid #777;

}

.input5:hover {
    background-color: #777;
border-right:4px solid #c00;
}