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

我试图用“9”替换“5”中的“5”，它正在工作，但滑块跳到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可视化整个比例长度，只是希望用户选择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]
  });

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

带步骤的范围滑块

1 个答案: