JSFiddle - React, Tailwind, and code Playground

by marbx

HTML

<div class="container">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
  <div class="mark mark1"></div>
  <div class="mark mark2"></div>
  <div class="mark mark3"></div>
  <div class="mark mark4"></div>

  <p id="shipping"></p>
</div>

CSS

body {
  margin-left: 0;
  margin-right: 0;
  text-align: center;
}

.slider {
  -webkit-appearance: none;
  appearance: none;
  height: 2px;
  background: black;
  outline: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.mark {
  width: 2px;
  height: 30px;
  background-color: #aaa;
  position: fixed;
  top: 6px;
  z-index: -1;
}

.mark1 {
  left: 13%;
}

.mark2 {
  left: 38%;
}

.mark3 {
  right: 13%;
}

.mark4 {
  right: 38%;
}


/* The slider handle (use webkit (Chrome, Opera, Safari, Edge) and moz (Firefox) to override default look) */

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 15px;
  height: 15px;
  background: black;
  cursor: pointer;
  border-radius: 50%;
  margin: 0;
}

.slider::-webkit-slider-thumb,
.slider::-moz-range-thumb {
  width: 15px;
  height: 15px;
  background: black;
  cursor: pointer;
  border-radius: 50%;
  margin: 0;
}

#shipping {
font-family: "Lato";
font-size: 2rem;
font-weight: 300;
}

JavaScript

var slider = document.getElementById("myRange");
var output = document.getElementById("shipping");
output.innerHTML = slider.value; // Display the default slider value

var labels = ['Standard', 'Express', 'Priority', 'Overnight'];

slider.value = 0;
sliderInputChange();

// Update the current slider value (each time you drag the slider handle)
slider.oninput = sliderInputChange;

function sliderInputChange() {
  var val = slider.value;
  var unit = 12.5;
  var optionNum;

  if (val <= 25) {
    slider.value = unit;
    optionNum = 1;
  } else if (val <= 50) {
    slider.value = 25 + unit;
    optionNum = 2;
  } else if (val <= 75) {
    slider.value = 50 + unit;
    optionNum = 3;
  } else {
    slider.value = 75 + unit;
    optionNum = 4;
  }
  output.innerHTML = 'Shipping: ' + labels[optionNum - 1];
}