javascript - 单击单选按钮更改范围输入值

Question

我有一个带有单选按钮的范围输入，我希望当我单击每个单选按钮时将范围输入增加 10 个步骤，但我不希望用户能够更改该值滑动时我只想让它在单击单选按钮时改变，我该怎么做？这是我的代码:

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}

.slidecontainer {
    width: 100%;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 25px;
    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;
    background: #4CAF50;
    cursor: pointer;
}

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

<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
  <p>Value: <span id="demo"></span></p>
</div>

<input type="radio" name="radio-1">
<label>Change range</label>

<input type="radio" name="radio-2">
<label>Change range</label>

<input type="radio" name="radio-3">
<label>Change range</label>

Answer 1

第一个问题，简单的方法就是禁用#myrange，比如<input disabled> .

第二个问题，监听onchange/onclick事件，然后调整#myrange的值。

像下面的演示:

var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}

function addRange() {
  let rangeValue = parseInt(slider.value)
  slider.value = rangeValue + 10
  
}

function addNamedRange(itemName) { 
  if(slider.attributes['data-ref-' + itemName]) { return } 
  slider.setAttribute('data-ref-' + itemName, true) 
  let rangeValue = parseInt(slider.value) 
  slider.value = rangeValue + 10 
}

.slidecontainer {
    width: 100%;
}

.slider {
    -webkit-appearance: none;
    width: 100%;
    height: 25px;
    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;
    background: #4CAF50;
    cursor: pointer;
}

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

<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange" disabled>
  <p>Value: <span id="demo"></span></p>
</div>

<input type="radio" name="radio-1" onchange="addRange()">
<label>Change range</label>

<input type="radio" name="radio-2" onchange="addRange()">
<label>Change range</label>

<input type="radio" name="radio-3" onchange="addRange()">
<label>Change range</label>

<hr>

<p>
  <span style="font-weight:bold">Edit As OP requested:</span> 
  uses one data-ref of input[type=range] to store whehter radio box changed
</p>

<input type="radio" name="radio-progress" onchange="addNamedRange(this.name)">
<label>Change range</label>

<input type="radio" name="radio-progress" onchange="addNamedRange(this.name)">
<label>Change range</label>

<input type="radio" name="radio-progress" onchange="addNamedRange(this.name)">
<label>Change range</label>