postal/app/assets/stylesheets/application/elements/_spam_range.scss

.spamRangeLabel {
  font-size:12px;
  text-align:right;
  margin-top:7px;
}

.spamRange {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  width: 100%; /* Specific width is required for Firefox. */
  background: transparent; /* Otherwise white in Chrome */
  &:disabled {
    opacity:0.5;
  }
}

.spamRange::-webkit-slider-thumb {
  -webkit-appearance: none;
}

.spamRange:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

.spamRange::-ms-track {
  width: 100%;
  cursor: pointer;

  /* Hides the slider so custom styles can be added */
  background: transparent;
  border-color: transparent;
  color: transparent;
}

/* Special styling for WebKit/Blink */
.spamRange::-webkit-slider-thumb {
  -webkit-appearance: none;
  border: 2px solid #2b2e32;
  height:25px;
  width:25px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  margin-top: -7px; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
}

/* All the same stuff for Firefox */
.spamRange::-moz-range-thumb {
  border: 2px solid #2b2e32;
  height:25px;
  width:25px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
}

/* All the same stuff for IE */
.spamRange::-ms-thumb {
  border: 2px solid #2b2e32;
  height:25px;
  width:25px;
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
}

//
// Track
//

.spamRange::-webkit-slider-runnable-track {
  width: 100%;
  height: 12px;
  cursor: pointer;
  border-radius:30px;
  background: #3ff990; /* Old browsers */
  background: -moz-linear-gradient(left,  #3ff990 0%, #197ec9 47%, #6c5c8b 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  #3ff990 0%,#197ec9 47%,#6c5c8b 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  #3ff990 0%,#197ec9 47%,#6c5c8b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3ff990', endColorstr='#6c5c8b',GradientType=1 ); /* IE6-9 */
}

.spamRange::-moz-range-track {
  width: 100%;
  height: 12px;
  cursor: pointer;
  border-radius:30px;
  background: #3ff990; /* Old browsers */
  background: -moz-linear-gradient(left,  #3ff990 0%, #197ec9 47%, #6c5c8b 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  #3ff990 0%,#197ec9 47%,#6c5c8b 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  #3ff990 0%,#197ec9 47%,#6c5c8b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3ff990', endColorstr='#6c5c8b',GradientType=1 ); /* IE6-9 */
}

.spamRange::-ms-track {
  width: 100%;
  height: 12px;
  cursor: pointer;
  border-radius:30px;
  background: transparent;
  border-color: transparent;
  background: #3ff990; /* Old browsers */
  background: -moz-linear-gradient(left,  #3ff990 0%, #197ec9 47%, #6c5c8b 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  #3ff990 0%,#197ec9 47%,#6c5c8b 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  #3ff990 0%,#197ec9 47%,#6c5c8b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3ff990', endColorstr='#6c5c8b',GradientType=1 ); /* IE6-9 */
}

.spamRange--hot::-webkit-slider-runnable-track {
  background: #1688d0; /* Old browsers */
  background: -moz-linear-gradient(left,  #1688d0 0%, #fa141b 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  #1688d0 0%,#fa141b 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  #1688d0 0%,#fa141b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1688d0', endColorstr='#fa141b',GradientType=1 ); /* IE6-9 */
}

.spamRange--hot::-moz-range-track {
  background: #1688d0; /* Old browsers */
  background: -moz-linear-gradient(left,  #1688d0 0%, #fa141b 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  #1688d0 0%,#fa141b 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  #1688d0 0%,#fa141b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1688d0', endColorstr='#fa141b',GradientType=1 ); /* IE6-9 */
}

.spamRange--hot::-ms-track {
  background: #1688d0; /* Old browsers */
  background: -moz-linear-gradient(left,  #1688d0 0%, #fa141b 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  #1688d0 0%,#fa141b 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  #1688d0 0%,#fa141b 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1688d0', endColorstr='#fa141b',GradientType=1 ); /* IE6-9 */
}


.spamRange--blueGreen::-webkit-slider-runnable-track {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#146dd2+0,7cc546+100 */
  background: #146dd2; /* Old browsers */
  background: -moz-linear-gradient(left,  #146dd2 0%, #7cc546 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  #146dd2 0%,#7cc546 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  #146dd2 0%,#7cc546 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#146dd2', endColorstr='#7cc546',GradientType=1 ); /* IE6-9 */
}

.spamRange--blueGreen::-moz-range-track {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#146dd2+0,7cc546+100 */
  background: #146dd2; /* Old browsers */
  background: -moz-linear-gradient(left,  #146dd2 0%, #7cc546 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  #146dd2 0%,#7cc546 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  #146dd2 0%,#7cc546 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#146dd2', endColorstr='#7cc546',GradientType=1 ); /* IE6-9 */
}

.spamRange--blueGreen::-ms-track {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#146dd2+0,7cc546+100 */
  background: #146dd2; /* Old browsers */
  background: -moz-linear-gradient(left,  #146dd2 0%, #7cc546 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left,  #146dd2 0%,#7cc546 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right,  #146dd2 0%,#7cc546 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#146dd2', endColorstr='#7cc546',GradientType=1 ); /* IE6-9 */
}