<div class="container">
  <input type="range" step="20" min="0" max="100" value="75">
</div>
<div>POC - Firefox only</div>
input[type=range] {
  -webkit-appearance: none;
  margin: 10px 0;
  width: 40px;
  outline: none;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 17px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: rgba(99, 87, 118, 0.4);
  border-radius: 0;
//  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
  clip-path: path('M40 15V2.00537C40 0.576797 38.5455 -0.391138 37.2277 0.160488L1.5925 15.0776C0.585052 15.4993 0.886485 17 1.97864 17H38C39.1046 17 40 16.1046 40 15Z');
}
input[type=range]::-moz-range-thumb {
  border: 0px solid #000000;
  width: 20px;
  cursor: pointer;
  position: relative;
  width: 6px;
  height: 19px;
  background: #FFFFFF;
  box-shadow: -1px 2px 4px rgba(99, 87, 118, 0.6);
  border-radius: 2px;
  transform: translateY(1px);
}

input[type=range]::-moz-range-progress {
  background: #635776;
  height: 17px;
  clip-path: path('M40 15V2.00537C40 0.576797 38.5455 -0.391138 37.2277 0.160488L1.5925 15.0776C0.585052 15.4993 0.886485 17 1.97864 17H38C39.1046 17 40 16.1046 40 15Z');
}

body {
  padding: 30px;
}

.container {
  // For demo
  transform: scale(3);
  transform-origin: left;
  margin-bottom: 30px;
  padding-left: 2px;
}
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.