ノイスライダーキーの押下時に方向が変わるとエラーが発生する

Question

ヌーライダーをltrに設定すると、次のようにスムーズに上下に移動できます。 http://jsfiddle.net/jeff_chung/L8md5251/

<div class="example"> 
    <div id="keypress" class="noUi-target noUi-ltr noUi-horizontal noUi-background"> 

    </div> 
    <input type="text" id="input-with-keypress"> 
</div> 
<script> 
    var keypressSlider = document.getElementById('keypress'), 
     input = document.getElementById('input-with-keypress'); 

    noUiSlider.create(keypressSlider, { 
     start: 0.66, 
     direction: 'ltr', 
     connect: 'lower', 
     range: { 
      'min': [0.66, 0.22], 
      '14.29%': [1, 0.33], 
      '28.57%': [2, 0.67], 
      '42.86%': [5, 1.67], 
      '57.14%': [10, 3.33], 
      '71.43%': [20, 6.67], 
      '85.71%': [40, 13.33], 
      'max': 80 
     } 
    }); 

    keypressSlider.noUiSlider.on('update', function(values, handle) { 
     input.value = values[handle]; 
    }); 

    input.addEventListener('change', function() { 
     keypressSlider.noUiSlider.set([null, this.value]); 
    }); 
    // Listen to keydown events on the input field. 
    input.addEventListener('keydown', function(e) { 

     // Convert the string to a number. 
     var value = Number(keypressSlider.noUiSlider.get()), 
      sliderStep = keypressSlider.noUiSlider.steps() 

     // Select the stepping for the first handle. 
     sliderStep = sliderStep[0]; 

     // 13 is enter, 
     // 38 is key up, 
     // 40 is key down. 
     switch (e.which) { 
      case 13: 
       keypressSlider.noUiSlider.set(this.value); 
       break; 
      case 38: 
       keypressSlider.noUiSlider.set(value + sliderStep[1]); 
       break; 
      case 40: 
       keypressSlider.noUiSlider.set(value - sliderStep[0]); 
       break; 
     } 
    }); 
</script> 

しかし、私はそれはそれは http://jsfiddle.net/jeff_chung/po2rcj7z/1/

<div class="example"> 
    <div id="keypress" class="noUi-target noUi-ltr noUi-horizontal noUi-background"> 

    </div> 
    <input type="text" id="input-with-keypress"> 
</div> 
<script> 
    var keypressSlider = document.getElementById('keypress'), 
     input = document.getElementById('input-with-keypress'); 

    noUiSlider.create(keypressSlider, { 
     start: 0.66, 
     direction: 'rtl', 
     connect: 'lower', 
     range: { 
      'min': [0.66, 0.22], 
      '14.29%': [1, 0.33], 
      '28.57%': [2, 0.67], 
      '42.86%': [5, 1.67], 
      '57.14%': [10, 3.33], 
      '71.43%': [20, 6.67], 
      '85.71%': [40, 13.33], 
      'max': 80 
     } 
    }); 

    keypressSlider.noUiSlider.on('update', function(values, handle) { 
     input.value = values[handle]; 
    }); 

    input.addEventListener('change', function() { 
     keypressSlider.noUiSlider.set([null, this.value]); 
    }); 
    // Listen to keydown events on the input field. 
    input.addEventListener('keydown', function(e) { 

     // Convert the string to a number. 
     var value = Number(keypressSlider.noUiSlider.get()), 
      sliderStep = keypressSlider.noUiSlider.steps() 

     // Select the stepping for the first handle. 
     sliderStep = sliderStep[0]; 

     // 13 is enter, 
     // 38 is key up, 
     // 40 is key down. 
     switch (e.which) { 
      case 13: 
       keypressSlider.noUiSlider.set(this.value); 
       break; 
      case 38: 
       keypressSlider.noUiSlider.set(value + sliderStep[1]); 
       break; 
      case 40: 
       keypressSlider.noUiSlider.set(value - sliderStep[0]); 
       break; 
     } 
    }); 
</script> 

Answer 1

は、私が思うにスクロール2大丈夫ときにマウスに到達したときに上下、RTLにそれをすることはできません設定した場合は何も問題はありませんあなたのコードはnoUiSliderページの例に従います。

input.addEventListener('keydown', function(e) { 
    // Convert the string to a number. 
    var value = Number(keypressSlider.noUiSlider.get()), 
     sliderStep = keypressSlider.noUiSlider.steps() 

    // Select the stepping for the first handle. 
    sliderStep = sliderStep[0]; 

    // 13 is enter, 
    // 38 is key up, 
    // 40 is key down. 
    switch (e.which) { 
     case 13: 
      keypressSlider.noUiSlider.set(this.value); 
      break; 
     case 38: 
      keypressSlider.noUiSlider.set(value + sliderStep[1]); 
      break; 
     case 40: 
      keypressSlider.noUiSlider.set(value - sliderStep[0]); 
      break; 
    } 
}); 

元のnoSiiderコードがバグがあるようです。元の例に従えば、このフィドルhttp://jsfiddle.net/ubr37u5n/は完全に機能しますが、方向をrtlに変更すると、同じ動作が発生し、このフィドルで確認できるように、の値で固定されます。http://jsfiddle.net/p6kkr2hv/ 。 comment.Itためhttp://jsfiddle.net/a85uvhg8/