从单选按钮创建滑块选择

Question

我有单选按钮.

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

我想使用JavaScript将其转换为滑块选择.有点像,

我在网上做了很多研究,发现了js滑块

W3Schools的

但是它不提供选择(断点)选项.

而且,我经历了

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

但不知道我怎么能达到只有很少值不完全滑块的范围.

Answer 1

通过将滑块分成几部分,您可以使用一些JavaScript和CSS创建类似的效果.我添加了标记以尝试使其看起来与您问题中的照片类似.

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>