Buttons for range slider arent following the step of the slider-CodePudding

I am trying to use a range slider and assign buttons to the slider that move it. It works perfectly when using the slider with arrow keys or using the mouse, however, the next button isn't working as intended. The button to move the slider forward is not following the step I have it assigned to. It is supposed to be moving up 6 every time but it goes up 6, then to 66 then past the range. I am not sure how to fix this and it is especially odd considering the back button works perfectly fine.

css

  button:before,
  button:after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: middle;
  }

  button.prev:before {
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-right: 6px solid #333;
  }

  button.next:after {
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid #333;
  }


    #slider {
        width: 500px;
    }

html

<button id="prev-button" ></button>
<button id="next-button" ></button>



<input type="range" min="0" max="384" value="0" step="6"  
oninput="updateImage(this.value)" id="range-slider"/>

<div>
<img id="image" src="Model_Data/GFS/model_variables/images/2m_temp/neus/2022-12-06- 
   18/gfs_6hr_2m_temp_hour_0.png" width="840" height="660">
</div>

// Get the buttons and slider elements
  var prevButton = document.getElementById('prev-button');
  var nextButton = document.getElementById('next-button');
  var rangeSlider = document.getElementById('range-slider');
    var step = rangeSlider.step;
  // Add event listeners to the buttons
  prevButton.addEventListener('click', function() {
    // Decrement the value of the range slider by the step value
    rangeSlider.value -= rangeSlider.step;
  updateImage(rangeSlider.value)});
  nextButton.addEventListener('click', function() {
    // Increment the value of the range slider by the step value
    rangeSlider.value  = rangeSlider.step;
  updateImage(rangeSlider.value)});

document.addEventListener('keydown', function(e) {
  if (e.keyCode == 39) { //right
    slider.value =  slider.value    slider.step;
  } else if (e.keyCode == 37) { //left
    slider.value =  slider.value -  slider.step;
  }
  updateImage(slider.value)
})

function updateImage(sliderValue) {
  console.log(sliderValue)
  document.getElementById("image").src =
    "Model_Data/GFS/model_variables/images/2m_temp/neus/2022-12-06- 
   18/gfs_6hr_2m_temp_hour_"  
    sliderValue   ".png";
}

CodePudding user response：

For some reason, rangeSlider treats its value as a string, apparently. So "6" "6" equals 66. The funny thing about js is that this only happens with the plus operator, not minus :) JS thinks you want to concatenate two strings instead of calculate.

Add a little bit of JS in the click event listener to fix this:

  nextButton.addEventListener('click', function() {
    // Increment the value of the range slider by the step value
    val = parseInt(rangeSlider.value);
    step = parseInt(rangeSlider.step);
    val  = step;
    rangeSlider.value = val;
    updateImage(rangeSlider.value);
  });