Imagine/bulma-slider.css

input[type=range].slider {
  height: 25px;
  -webkit-appearance: none;
  margin: 10px 0;
  background-color: inherit;
}

input[type=range].slider.is-fullwidth {
  display: block;
  width: 100%;
}
input[type=range].slider:focus {
  outline: none;
}

input[type=range].slider.has-output + output {
  width: 4rem;
  background-color: #4a4a4a;
  border-radius: 4px;
  padding: .4rem .8rem;
  font-size: .75rem;
  line-height: .75rem;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #fff;
  overflow: hidden;
  pointer-events: none;
  z-index:200;
}

input[type=range].slider.has-output {
  display: inline-block;
  vertical-align: middle;
}

input[type=range].slider.is-fullwidth.has-output {
  width: calc(100% - 5.2rem);
}

input[type=range].slider.has-output + output {
  display: inline-block;
  margin-left: .75rem;
  vertical-align: middle;
}

input[type=range].slider::-webkit-slider-runnable-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000;
  background-color: #dbdbdb;
  border-radius: 4px;
  border: 0px solid #000000;
}
input[type=range].slider::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 1px solid #b5b5b5;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background-color: #ffffff;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -7px;
}
input[type=range].slider:focus::-webkit-slider-runnable-track {
  background-color: #dbdbdb;
}

input[type=range].slider::-moz-range-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000;
  background-color: #dbdbdb;
  border-radius: 4px;
  border: 0px solid #000000;
}
input[type=range].slider::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000;
  border: 1px solid #b5b5b5;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background-color: #ffffff;
  cursor: pointer;
}

input[type=range].slider::-ms-track {
  width: 100%;
  height: 5px;
  cursor: pointer;
  animate: 0.2s;
  background-color: transparent;
  border-color: transparent;
  color: transparent;
}
input[type=range].slider::-ms-fill-lower {
  background-color: #dbdbdb;
  border: 0px solid #000000;
  border-radius: 8px;
  box-shadow: 0px 0px 0px #000000;
}
input[type=range].slider::-ms-fill-upper {
  background-color: #dbdbdb;
  border: 0px solid #000000;
  border-radius: 4px;
  box-shadow: 0px 0px 0px #000000;
}
input[type=range].slider::-ms-thumb {
  margin-top: 1px;
  box-shadow: 0px 0px 0px #000000;
  border: 1px solid #b5b5b5;
  height: 18px;
  width: 18px;
  border-radius: 25px;
  background-color: #ffffff;
  cursor: pointer;
}
input[type=range].slider:focus::-ms-fill-lower {
  background-color: #dbdbdb;
}
input[type=range].slider:focus::-ms-fill-upper {
  background-color: #dbdbdb;
}

input[type=range].slider.is-primary::-webkit-slider-runnable-track {
  background-color: #00d1b2 !important;
}
input[type=range].slider.is-primary::-moz-range-track {
  background-color: #00d1b2 !important;
}
input[type=range].slider.is-primary::-ms-fill-lower {
  background-color: #00d1b2 !important;
}
input[type=range].slider.is-primary::-ms-fill-upper {
  background-color: #00d1b2 !important;
}

input[type=range].slider.is-link::-webkit-slider-runnable-track {
  background-color: #3273dc !important;
}
input[type=range].slider.is-link::-moz-range-track {
  background-color: #3273dc !important;
}
input[type=range].slider.is-link::-ms-fill-lower {
  background-color: #3273dc !important;
}
input[type=range].slider.is-link::-ms-fill-upper {
  background-color: #3273dc !important;
}

input[type=range].slider.is-info::-webkit-slider-runnable-track {
  background-color: #209cee !important;
}
input[type=range].slider.is-info::-moz-range-track {
  background-color: #209cee !important;
}
input[type=range].slider.is-info::-ms-fill-lower {
  background-color: #209cee !important;
}
input[type=range].slider.is-info::-ms-fill-upper {
  background-color: #209cee !important;
}

input[type=range].slider.is-success::-webkit-slider-runnable-track {
  background-color: #23d160 !important;
}
input[type=range].slider.is-success::-moz-range-track {
  background-color: #23d160 !important;
}
input[type=range].slider.is-success::-ms-fill-lower {
  background-color: #23d160 !important;
}
input[type=range].slider.is-success::-ms-fill-upper {
  background-color: #23d160 !important;
}

input[type=range].slider.is-warning::-webkit-slider-runnable-track {
  background-color: #ffdd57 !important;
}
input[type=range].slider.is-warning::-moz-range-track {
  background-color: #ffdd57 !important;
}
input[type=range].slider.is-warning::-ms-fill-lower {
  background-color: #ffdd57 !important;
}
input[type=range].slider.is-warning::-ms-fill-upper {
  background-color: #ffdd57 !important;
}

input[type=range].slider.is-danger::-webkit-slider-runnable-track {
  background-color: #ff3860 !important;
}
input[type=range].slider.is-danger::-moz-range-track {
  background-color: #ff3860 !important;
}
input[type=range].slider.is-danger::-ms-fill-lower {
  background-color: #ff3860 !important;
}
input[type=range].slider.is-danger::-ms-fill-upper {
  background-color: #ff3860 !important;
}

input[type=range].slider.is-white.has-output + output {
  background-color: #fff;
  color: #0a0a0a;
}

input[type=range].slider.is-black.has-output + output {
  background-color: #0a0a0a;
  color: #ffffff;
}

input[type=range].slider.is-light.has-output + output {
  background-color: #f5f5f5;
  color: #363636;
}

input[type=range].slider.is-dark.has-output + output {
  background-color: #363636;
  color: #f5f5f5;
}

input[type=range].slider.is-primary.has-output + output {
  background-color: #00d1b2;
  color: #ffffff;
}

input[type=range].slider.is-link.has-output + output {
  background-color: #3273dc;
  color: #ffffff;
}

input[type=range].slider.is-info.has-output + output {
  background-color: #209cee;
  color: #ffffff;
}

input[type=range].slider.is-success.has-output + output {
  background-color: #23d160;
  color: #ffffff;
}

input[type=range].slider.is-warning.has-output + output {
  background-color: #ffdd57;
  color: rgba(0, 0, 0, .7);
}

input[type=range].slider.is-danger.has-output + output {
  background-color: #ff3860;
  color: #ffffff;
}