input[type=range] {
    height: 31px;
    -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;
    border-radius: 100px;
    box-sizing: border-box;
    background: rgb(102,0,255);
    background: -moz-linear-gradient(215deg, rgba(102,0,255,1) 0%, rgba(255,0,0,1) 50%, rgba(255,204,0,1) 110%);
    background: -webkit-linear-gradient(215deg, rgba(102,0,255,1) 0%, rgba(255,0,0,1) 50%, rgba(255,204,0,1) 110%);
    background: linear-gradient(215deg, rgba(102,0,255,1) 0%, rgba(255,0,0,1) 50%, rgba(255,204,0,1) 110%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#6600ff",endColorstr="#ffcc00",GradientType=1);
    -moz-box-shadow: inset 0 0 8px rgba(255,255,255,0.3);
    -webkit-box-shadow: inset 0 0 8px rgba(255,255,255,0.3);
    box-shadow: inset 0 0 8px rgba(255,255,255,0.3);
  }
  input[type=range]::-webkit-slider-thumb {
    box-shadow: 0px 0px 25px rgba(0,0,0,0.1);
    border: 15px solid white;
    box-sizing: border-box;
    height: 50px;
    width: 75px;
    border-radius: 25px;
    background: rgba(255,255,255,0.55);
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -15px;
  }
  input[type=range]:focus::-webkit-slider-runnable-track {
    background: rgb(102,0,255);
    background: -moz-linear-gradient(215deg, rgba(102,0,255,1) 0%, rgba(255,0,0,1) 50%, rgba(255,204,0,1) 110%);
    background: -webkit-linear-gradient(215deg, rgba(102,0,255,1) 0%, rgba(255,0,0,1) 50%, rgba(255,204,0,1) 110%);
    background: linear-gradient(215deg, rgba(102,0,255,1) 0%, rgba(255,0,0,1) 50%, rgba(255,204,0,1) 110%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#6600ff",endColorstr="#ffcc00",GradientType=1);
  }
  input[type=range]::-moz-range-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    animate: 0.2s;
    box-shadow: 0px 0px 0px #000000;
    background: rgb(102,0,255);
    background: -moz-linear-gradient(215deg, rgba(102,0,255,1) 0%, rgba(255,0,0,1) 50%, rgba(255,204,0,1) 110%);
    background: -webkit-linear-gradient(215deg, rgba(102,0,255,1) 0%, rgba(255,0,0,1) 50%, rgba(255,204,0,1) 110%);
    background: linear-gradient(215deg, rgba(102,0,255,1) 0%, rgba(255,0,0,1) 50%, rgba(255,204,0,1) 110%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#6600ff",endColorstr="#ffcc00",GradientType=1);
    border-radius: 100px;
  }
  input[type=range]::-moz-range-thumb {
    box-shadow: 0px 0px 0px #000000;
    border: 0px solid #000000;
    height: 25px;
    width: 25px;
    border-radius: 100px;
    background: #000000;
    cursor: pointer;
  }
  input[type=range]::-ms-track {
    width: 100%;
    height: 5px;
    cursor: pointer;
    animate: 0.2s;
    background: transparent;
    border-color: transparent;
    color: transparent;
  }
  input[type=range]::-ms-fill-lower {
    background: #000000;
    border: 0px solid #000000;
    border-radius: 100px;
    box-shadow: 0px 0px 0px #000000;
  }
  input[type=range]::-ms-fill-upper {
    background: #000000;
    border: 0px solid #000000;
    border-radius: 100px;
    box-shadow: 0px 0px 0px #000000;
  }
  input[type=range]::-ms-thumb {
    margin-top: 1px;
    box-shadow: 0px 0px 0px #000000;
    border: 0px solid #000000;
    height: 25px;
    width: 25px;
    border-radius: 100px;
    background: #000000;
    cursor: pointer;
  }
  input[type=range]:focus::-ms-fill-lower {
    background: #000000;
  }
  input[type=range]:focus::-ms-fill-upper {
    background: #000000;
  }