How to be able to use HTML slider with arrow keys-CodePudding

I have this code written up to and the issue I am having is moving the slider with arrow keys, it works if I first click the slider but I want it to work on the page load without having to click the slider first and am not sure how to accomplish that.

<script>
function updateImage(sliderValue) {
   document.getElementById("image").src = 
"img" 
  sliderValue   ".png";
}
      document.getElementById('slider').addEventListener(function() {
        this.focus(); 
      });
</script>

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

<img id="image" src="img.png" width="1144" height="898">

CodePudding user response：

Add a keydown listener on the document that checks the event key code (from which it determines the key pressed), and changes the slider value accordingly:

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 =
    "img"  
    sliderValue   ".png";
}

<div >
  <input type="range" min="0" max="400" value="384" step="6" id="slider" oninput="updateImage(this.value)" />
</div>
<img id="image" src="img.png">

CodePudding user response：

The first thing, you can do your job with two different ways, one is simple and not entirely active, and the second is great but more complicated:

The First way:

You can add a onload event for the window, and when the window is loaded you can focus on the slider input, and this will makes it possible to use arrow keys for move your slides right and left. and instead of saying:

document.getElementById('slider').addEventListener(function() {
    this.focus(); 
});

You can say that:

window.onload = function() {
    document.getElementById("slider").focus()
}

And this will put the focus on your input directly when the window is finishes loading.

This is the easy way to use arrow buttons to navigate your slider, But there is another advanced way to do this.

The Second way:

You can use the keyEvents on the window itself again but not for pushing the focus to the input range, you will use it for getting what's clicked whatever where, and if the clicked button is one of the arrow left or right buttons, increase or decrease the value of the slider, and run the updateImage with the new value and this is the code that you need to put after the updateImage function:

window.addEventListener("keydown", (e) => {
    let slider = document.getElementById("slider")
    if( e.key === "ArrowLeft" ) {
        e.preventDefault()
        slider.value -= 1
        updateImage(slider.value)
    }
    else if( e.key === "ArrowRight" ) {
        e.preventDefault()
        slider.value = Number(slider.value)   1
        updateImage(slider.value)
    }
})

Here in this code, you will find that I apply the function whenever a keydown event happens in the window, whatever where. And inside the function, I got the slider, then check for the arrow left and right keys, inside the two condition I prevent default actions of the buttons, but you can delete this part, then I increase or decrease the slider value by one, "In your case add or remove 6, because you set the step to 6", then I updateImage mySelf with the new value, and that's because changing the input value from javascript will not run your oninput event attached to the input. And now, you can click on the right and left arrows while you are not even focus on the input, and the images will still changed and the slider itself will still changed.

I hope I managed to solve your problem.

CodePudding user response：

My solution of your problem.

const slider = document.getElementById('slider');

slider.addEventListener(e => {
  switch(e.key) {
    case "ArrowLeft":
      // Left arrow logic
      break;
    case "ArrowRight":
      // Right arrow logic
      break;
  }
});