Slider with round edge and text value

A slider that uses range and shows text

by marbx

HTML

<div class="slidecontainer">
  <input type="range" min="0" max="3" value="1" class="slider" id="rango" oninput="outputUpdate(val)">
  <output for="rango" id="valor"></output>
</div>

CSS

.slidecontainer {
  width: 20%;
  padding-top: 18px;
  margin-left: 110px;
}

.slidecontainer output {
  font-family: 'museo700';
  margin-bottom: 0px;
  margin-left: 110px;
  position: absolute;
  padding: .5em;
  background: transparent;
  color: blue;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 5px;
  border-radius: 2.5px;
  background: #003664;
  outline: none;
  -webkit-transition: .2s;
  transition: opacity .2s;
  border: 0;
}

.slider:hover {
  opacity: 1;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  border: 3.5px solid blue;
}

.slider::-moz-range-thumb {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  border: 3.5px solid blue;
}

JavaScript

var steps = [
  "Standard",
  "Express",
  "Priority",
  "Overnight"
];
var slider = document.getElementById('rango');

slider.oninput = function() {
  var output = document.getElementById('valor');
  output.innerHTML = steps[this.value];
  var sliderWidth = this.getBoundingClientRect().width;
  var outputWidth = output.getBoundingClientRect().width;
  var offset = this.value / (this.max - this.min) * sliderWidth - outputWidth / 2;
  output.setAttribute('style', 'left: ' + offset + 'px');
}

slider.oninput();