<style>
   .slidecontainer {
   width: 90%;
   text-align: center;
   }

   .slider {
     -webkit-appearance: none;
     width: 70%;
     height: 15px;
     border-radius: 5px;
     background: #c2c2c2;
     outline: none;
     opacity: 0.8;
     -webkit-transition: .2s;
     transition: opacity .2s;
   }

   .slider:hover {
     opacity: 1;
   }

   .slider::-webkit-slider-thumb {
     -webkit-appearance: none;
     appearance: none;
     width: 25px;
     height: 25px;
     border-radius: 50%;
     background: #000000;
     cursor: pointer;
   }

   .slider::-moz-range-thumb {
     width: 25px;
     height: 25px;
     border-radius: 50%;
     background: #000000;
     cursor: pointer;
   }
</style>





<style>
      input[type=range] {
     -webkit-appearance: none;
     margin: 18px 0;
     width: 100%;
   }
   input[type=range]:focus {
     outline: none;
   }
   input[type=range]::-webkit-slider-runnable-track {
     width: 100%;
     height: 8.4px;
     cursor: pointer;
     animate: 0.2s;
     box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
     background: #3071a9;
     border-radius: 1.3px;
     border: 0.2px solid #010101;
   }
   input[type=range]::-webkit-slider-thumb {
     box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
     border: 1px solid #000000;
     height: 36px;
     width: 16px;
     border-radius: 3px;
     background: #ffffff;
     cursor: pointer;
     -webkit-appearance: none;
     margin-top: -14px;
   }
   input[type=range]:focus::-webkit-slider-runnable-track {
     background: #367ebd;
   }
   input[type=range]::-moz-range-track {
     width: 100%;
     height: 8.4px;
     cursor: pointer;
     animate: 0.2s;
     box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
     background: #3071a9;
     border-radius: 1.3px;
     border: 0.2px solid #010101;
   }
   input[type=range]::-moz-range-thumb {
     box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
     border: 1px solid #000000;
     height: 36px;
     width: 16px;
     border-radius: 3px;
     background: #ffffff;
     cursor: pointer;
   }
   input[type=range]::-ms-track {
     width: 100%;
     height: 8.4px;
     cursor: pointer;
     animate: 0.2s;
     background: transparent;
     border-color: transparent;
     border-width: 16px 0;
     color: transparent;
   }
   input[type=range]::-ms-fill-lower {
     background: #2a6495;
     border: 0.2px solid #010101;
     border-radius: 2.6px;
     box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
   }
   input[type=range]::-ms-fill-upper {
     background: #3071a9;
     border: 0.2px solid #010101;
     border-radius: 2.6px;
     box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
   }
   input[type=range]::-ms-thumb {
     box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
     border: 1px solid #000000;
     height: 36px;
     width: 16px;
     border-radius: 3px;
     background: #ffffff;
     cursor: pointer;
   }
   input[type=range]:focus::-ms-fill-lower {
     background: #3071a9;
   }
   input[type=range]:focus::-ms-fill-upper {
     background: #367ebd;
   }
</style>



<style>
   .wrap {
     float: left;
     position: relative;
     margin: 0 0.5em 0.5em;
     padding: 0.5em;
     height: 12.5em;
     width: 1.5em;
   }  
  [type='range'] {
     margin: 0;
     padding: 0;
     width: 12.5em;
     height: 1.5em;
   }
   [type='range'], [type='range']::-webkit-slider-thumb {
     -webkit-appearance: none;
   }
   [type='range']::-webkit-slider-runnable-track {
     box-sizing: border-box;
     border: none;
     width: 12.5em;
     height: 0.7em;
     background: #ccc;
   }
   [type='range']::-moz-range-track {
     box-sizing: border-box;
     border: none;
     width: 12.5em;
     height: 0.7em;
     background: #ccc;
   }
   [type='range']::-ms-track {
     box-sizing: border-box;
     border: none;
     width: 0.7em;
     height: 1em;
     background: #ccc;
   }
   [type='range']::-webkit-slider-thumb {
     margin-top: -0.35em;
     box-sizing: border-box;
     border: none;
     width: 1.5em;
     height: 1.5em;
     border-radius: 50%;
     background: black;
   }
   [type='range']::-moz-range-thumb {
     box-sizing: border-box;
     border: none;
     width: 1.5em;
     height: 1.5em;
     border-radius: 50%;
     background: black;
   }
   [type='range']::-ms-thumb {
     margin-top: 0;
     box-sizing: border-box;
     border: none;
     width: 1.5em;
     height: 1.5em;
     border-radius: 50%;
     background: black;
   }
</style>

input[type=range] {
  height: 36px;
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 20px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000;
  background: #C9D4D0;
  border-radius: 1px;
  border: 0px solid #010101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000031;
  border: 0px solid #000000;
  height: 30px;
  width: 30px;