带台阶的范围滑块

Question

我的范围滑块有问题。我只想要这个值：1、3、5、10，但我的脚本运行不正常。

$(function(){
$('#boga').on('input',function(){
var hodnota=$(this).val(); 
if(hodnota<=5) 
$(this).attr("step","2");  
else {
$(this).attr("step","5");    
} 

});
}); 

 var max = 10,
 min = 1,
 step = 1,
 output = $('#output').text(min);
            
 $(".range-slider")
 .attr({'max': max, 'min':min, 'step': step,'value': String(min)})
  .on('input change', function() {               
   output.text(this.value);
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<output id="output"></output>
 <input id="boga" class="range-slider" type="range">

我尝试将 else 中的“5”替换为“9”，它可以正常工作，但滑块会跳到 1，然后跳到 10。

Answer 1

你可以试试这个脚本：

    const AVAILABLE_VALUES = [1, 3, 5, 10];

    const MAX = AVAILABLE_VALUES[AVAILABLE_VALUES.length - 1],
      MIN = AVAILABLE_VALUES[0];

var output = $('#output').text(MIN);

    $(function() {
      var lastValue = MIN;
      $('#boga').on('input keydown', function(event) {
        var hodnota = parseInt($(this).val(), 10);
        if (event.keyCode) {
          // Keyboard navigation
          var indexOffset = 0;
          switch (event.keyCode) {
            case 38:
            case 39:
              if (hodnota < MAX) {
                indexOffset = 1;
              }
              break;
            case 37:
            case 40:
              if (hodnota > MIN) {
                indexOffset = -1;
              }
              break;
          }
          hodnota = AVAILABLE_VALUES[AVAILABLE_VALUES.indexOf(hodnota) + indexOffset];
        } else if ((AVAILABLE_VALUES.indexOf(hodnota) === -1)) {
          // Make dragging more snappy and distinctive
          hodnota = lastValue;
        }

        $(this).val(hodnota);
        output.text(hodnota);
        lastValue = hodnota;
      });
    });

    $(".range-slider")
      .attr({
        'max': MAX,
        'min': MIN,
        'value': String(MIN)
      });

如果您不需要键盘导航，您可以省略 if (event.keycode) {..} 部分。

如果您不想从 1..10 可视化整个刻度长度，只想让用户 select 介于 1、3、5、10 之间的值，您可以使用更简单的版本：

const AVAILABLE_VALUES = [1, 3, 5, 10];

const MAX = AVAILABLE_VALUES.length - 1,
  MIN = 0;

var output = $('#output').text(AVAILABLE_VALUES[MIN]);

$(function() {
  $('#boga').on('input', function(event) {
    var hodnota = parseInt($(this).val(), 10);
    $(this).attr('real-value', AVAILABLE_VALUES[hodnota]);
    output.text($(this).attr('real-value'));
  });
});

$(".range-slider")
  .attr({
    'max': MAX,
    'min': MIN,
    'value': String(MIN),
    'real-value': AVAILABLE_VALUES[0]
  });

如果您有任何问题，请告诉我。

带台阶的范围滑块

Range slider with steps

jquery

html

slider

rangeslider