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

时间：2018-06-22 17:14:00

标签： javascript jquery html css

我有一个带有单选按钮的范围输入，我想当我单击每个单选按钮时将范围输入增加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>

5 个答案:

答案 0 :(得分：2)

第一个问题，简单的方法就是禁用#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>

答案 1 :(得分：1)

喜欢这个吗？

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

buttons[0].addEventListener('change', function(e) {
    slider.value = parseInt(slider.value) + 10;
    output.innerHTML = slider.value;
});

buttons[1].addEventListener('change', function(e) {
    slider.value = 50
    output.innerHTML = slider.value;
});

buttons[2].addEventListener('change', function(e) {
    slider.value = parseInt(slider.value) - 10
    output.innerHTML = slider.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" disabled="true" value="50" class="slider" id="myRange">
  <p>Value: <span id="demo"></span></p>
</div>

<input type="radio" name="radiobutton">
<label>add range</label>

<input type="radio" name="radiobutton">
<label>reset range</label>

<input type="radio" name="radiobutton">
<label>remove range</label>

答案 2 :(得分：0)

无线电输入应具有相同的名称，并为所有输入添加事件监听器。

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

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

document.querySelectorAll('[name="radio-1"]').forEach(input => {

  input.addEventListener('change', function(e) {
    slider.value++;
    output.innerHTML = slider.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" disabled="true" 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-1">
<label>Change range</label>

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

答案 3 :(得分：0)

  • 禁用滑块，以便用户无法对其进行更改。
  • 给您的收音机起相同的名字。
  • 将jquery链接添加到您的代码。 （添加了CDN）
  • 我添加了一个jQuery代码，以在单击单选按钮时更改范围值。

 <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
   
    var slider = document.getElementById("myRange");
    var output = document.getElementById("demo");
    output.innerHTML = slider.value;

    slider.oninput = function () {
        output.innerHTML = this.value;
    }
    $(document).ready(function () {
        $('input[type="radio"]').change(function () {
            slider.value = parseInt(slider.value) + 10;
            console.log(slider.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" disabled>
    <p>Value:
        <span id="demo"></span>
    </p>
</div>

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

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

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

答案 4 :(得分：0)

你去了：）

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

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

$( '.change_range' ).each( function() {
  $(this).click( function( e ) {
    var el = $('#myRange');
    
    // set new ranges
    el.attr('min', $(this).data('range-from'));
    el.attr('max', $(this).data('range-to'));
    
    el.val( $(this).data('range-from') ); // reset to min
    slider.oninput(); // refresh
  } );
});
.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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
  <p>Value: <span id="demo"></span></p>
</div>

<label>
  <input type="radio" name="radioRange" class="change_range" data-range-from="10" data-range-to="20">
  Change range
</label>

<label>
  <input type="radio" name="radioRange" class="change_range" data-range-from="10" data-range-to="100">
  Change range
</label>

<label>
  <input type="radio" name="radioRange" class="change_range" data-range-from="2" data-range-to="12">
  Change range
</label>

相关问题
最新问题