Allow increasing the range input max value

[mably]

Here is what I did to keep the slider working properly while increasing the range input max value:

this.animationFrame = requestAnimationFrame(() => {
  this.shadowRoot.host.style.setProperty('--exposure', `${(target.value / target.max * 100)}%`)
});

Setting the max value to 1000 allows to have a very smooth slide effect compared to the 100 max value.

[Paul-Hebert]

@mably Can you help me understand the benefit of increasing the max value?

Does increasing the max value provide a better experience than lowering the step value?

I kind of think that having a max value of 100 might be clearer for screen reader users. e.g. "the image is 50% exposed" vs "the image is 500/1000 exposed"

[mably]

It mainly allows to have a really smooth sliding effect when using the mouse, you can check it here: https://standardbm.e-bordeaux.org/image-compare-slider

But screen readers might sound a bit weird when vocalizing slider values for sure.

Could be interesting to have the choice to enable it or not though.

[mably]

Ok, a better solution is to simply use a decimal step like 0.01 when using mouse.

So no need to modify the default 100 max value.

New code:

var keyboardStep = 1;
if (parseInt(element.getAttribute('keyboard_step')) > 1) {
  keyboardStep = parseInt(element.getAttribute('keyboard_step'));
}
var mouseStep = 1;
if (parseFloat(element.getAttribute('step')) < 1) {
  mouseStep = element.getAttribute('step');
  range_input.step = mouseStep;
}
if (keyboardStep > 1 || mouseStep !== 1) {
  range_input.addEventListener('keydown', function(evt) {
    // Only set the step on arrow key events.
    switch (evt.key) {
      case 'ArrowDown':
      case 'ArrowLeft':
      case 'ArrowRight':
      case 'ArrowUp':
        range_input.step = keyboardStep;
    }
  });
  range_input.addEventListener('keyup', function() {
    range_input.step = mouseStep;
  });
}

[Paul-Hebert]

Nice! This is a clever solution.

Is any further action needed on this issue or should I close it out?

[mably]

I think you can close it.

I guess we should create another dedicated issue for that keyboard_step idea...