Create slider selection from radio button

Question

I have radio buttons.

 <div>
 <input type="radio" name="ticket" value="Standard"> Standard
 <input type="radio" name="ticket" value="Express"> Express
 <input type="radio" name="ticket" value="Priority"> Priority
 <input type="radio" name="ticket" value="Overnight"> Overnight
</div>

I want to convert it to the slider selection using JavaScript.Somewhat like,

I have done lots of research on web and found js slider on

w3schools

However it does not provide selection(breakpoints) option.

Moreover,I went through

<input type="range" id="myRange" value="90">

but no idea how I can achieve range that only have few values not complete slider .

Answer 1

By dividing the slider in sections, you can create a similar effect with some JavaScript and CSS. I have added the markings to try and make it look similar to the photo in your question.

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];
}

@import url('https://fonts.google.com/?query=lato&selection.family=Lato:300');

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;
}

<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>

Answer 2

You can tweek same example of range of w3 schools as

var steps = [
    "Standard",
    "Express",
    "Priority",
    "Overnight"
];
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = steps[slider.value]; // Display the default slider value

// Update the current slider value (each time you drag the slider handle)
slider.oninput = function() {
    output.innerHTML = steps[this.value];
}

#slidecontainer {
    width: 100%;
}

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

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #4CAF50;
    cursor: pointer;
}

<div id="slidecontainer">
  <input type="range" min="0" max="3" value="3" class="slider" id="myRange">
  <p> <span id="demo"></span></p>
</div>