Question

我有一个范围滑块，我想在点击此处的任何位置时仅将其更新10％。现在，如果我点击范围滑块的末尾，则需要100％的值。

有可能这样做吗？我试过这个：

标记：

<input id="slider" type="range" min="0" max="50" value="24.5" step="1" />

JavaScript的：

var output = document.getElementById('range');
output.innerHTML = $('#slider').val();

function showValue(newValue) {
    output.innerHTML = newValue;
}

$('#slider').change(function(e) {
    showValue($(this).val());

});

请参阅此fiddle

Answer 1

我不知道我是否明白你的问题，这可能是你想要的吗？

$('#slider').click(function(e) {
    $('#slider').val(10);
    showValue(10);
});

Answer 2

检查下面的小提琴，希望这可能是要求。

Demo Fiddle

 $(function() {
 $( "#slider-range-max" ).slider({
 range: "max",
 min: 0,
 max: 100,
 step: 10,
 value:10,
 slide: function( event, ui ) {
  $( "#count" ).val( ui.value );
 }
});
  $( "#count" ).val( $( "#slider-range-max" ).slider( "value" ) );
});

<p>
 <label for="count">Steps Count : </label>
 <input type="text" id="count" style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range-max"></div>

干杯：）

Answer 3

我不知道我是否理解你的问题，但如果你想点击滑块标签，这会增加o减少10（取决于你点击光标右侧的左侧）
检查此Fiddle
您需要的所有jQuery代码是：

<script type="text/javascript">
$(document).ready(function(){
    $( ".no" ).on('mousedown',function(){return false;});   
    $('#slider').click(function(e){
        var x = e.pageX - this.offsetLeft;
        var val=parseInt($('#slider').val())
        x>val?valx=val+=10:valx=val-=10
        $('#slider').val(valx)
        $('#range').text(valx)
        })

})
</script>

我不知道为什么这段代码无法显示IE11中的小提琴页面，但我在我的网站上在线测试此代码并且也适用于IE11
如果这个解决方案适合您的需要，请记得投票;）
感谢

我想在点击它的任何地方时将我的范围滑块更新为10％。可能吗？

3 个答案: