How can I make some arrow keys that can manipulate a js-tray-slider?

I am using this tutorial:
https://tympanus.net/codrops/2019/09/17/how-to-build-a-color-customizer-app-for-a-3d-model-with-three-js/

to create a similar concept.
However, in the color selection area (the swatches), I don’t want only to be able to use the mouse to “scroll” back and forth. I also want to be able to use some arrow keys similar to these ones:
Arrow keys to controls back and forth

However, I am having a hard time figuring out how this can be done, so I would appreciate some help.

Is this something that can be done?

Also, there is problem when you use the mouse or even use touch devices, that it will select colors while trying to slide back and forth, which is quite annoying because you can’t scroll without hitting every color you touch on the way.

How can this be fixed as well?

You can try out the whole site (the tutorial) on codepen here:

'https://codepen.io/kylewetton/pen/jONpxpa'

But I have also made a version with more colors, that is a little more simple:
js fiddle