Bereich Schieberegler mit Schritten

Question

Ich habe ein Problem mit Bereich Schieberegler. Ich möchte nur diese Werte: 1, 3, 5, 10, aber mein Skript funktioniert nicht gut.

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

Ich habe versucht, "5" in sonst mit "9" zu ersetzen, es funktioniert aber Schieber springt auf 1 und nach dem 10.

Answer 1

Sie dieses Skript ausprobieren kann:

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) 
     }); 

Wenn Sie keine Tastaturnavigation benötigen, können Sie den if (event.keycode) {..} -Teil weglassen.

Wenn Sie nicht wollen, visualisieren wollen die volle Länge der Skala von 1..10 nur die Benutzer wählen zwischen 1, 3, 5, 10 Werte, die Sie die viel einfachere Version verwenden können:

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] 
    }); 

Wenn Sie Fragen haben, lassen Sie es mich wissen.