从单选按钮创建滑块选择

Question

我有单选按钮。

title.useHtml(true);
title.text(
  "Sales Performance"+
  "<br><a style=\"color:#0000FF; font-size: 10px;\">"+
  "according to annual report</a>"
);

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

我在网上进行了大量研究，并在

上找到了js滑块

w3schools

但是它不提供选择（断点）选项。

而且，我经历了

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

但不知道如何才能达到只有很少值不能完成滑块的范围。

Answer 1

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

你可以调整w3学校范围的相同例子

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;