.sliderontorls input {
  -webkit-appearance: none;
  width: 100%;
  height: 10px;
  margin: 10px 50px;
   background: linear-gradient(to right, #f5f5f5 0%, #f5f5f5 100%);
  background-size: 150px 10px;
  background-position: center;  
  outline: none;
  zoom: 130%; 
  margin: auto;
  margin-bottom: 30px; 
}
 .sliderontorls input ::-webkit-slider-thumb {
 -webkit-appearance: none;
 width: 20px;
 height: 20px;
 background: #f5f5f5;
 position: relative;
 z-index: 3;
 border-radius:100%;
 
}
 .sliderontorls input ::-webkit-slider-thumb:after {
 content: " ";
 width: 100%;
 height: 10px;
 position: absolute;
 z-index: 1;
 right: 20px;
 top: 5px;
 background: #ef5050;
}
 .green::-webkit-slider-thumb {
 background: #f5f5f5;
}
 .green::-webkit-slider-thumb:after {
 background: #ef5050;
}
 .red::-webkit-slider-thumb {
 background: #c0392b;
}
 .red::-webkit-slider-thumb:after {
 background: #e74c3c;
}
 .blue::-webkit-slider-thumb {
 background: #2980b9;
}
 .blue::-webkit-slider-thumb:after {
 background: #3498db;
}
 .orange::-webkit-slider-thumb {
 background: #d35400;
}
 .orange::-webkit-slider-thumb:after {
 background: #e67e22;
}
 .purple::-webkit-slider-thumb {
 background: #8e44ad;
}
 .purple::-webkit-slider-thumb:after {
 background: #9b59b6;
}
 .gray::-webkit-slider-thumb {
 background: #7f8c8d;
}
 .gray::-webkit-slider-thumb:after {
 background: #95a5a6;
}
output {
    
}

.submit {
   
}