-
Notifications
You must be signed in to change notification settings - Fork 5
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Allow to define the range input step #72
Comments
This is a good idea! I'm not sure when I'll have a chance to look into this. Feel free to make a PR if you'd like. Otherwise I'll try to tackle this when I have some free time. |
I think we can improve things a bit when using a high The solution is to simply set if (parseInt(element.getAttribute('step')) > 1) {
range_input.step = element.getAttribute('step');
range_input.addEventListener('mousedown', function() {
range_input.step = 1;
});
range_input.addEventListener('mouseup', function() {
range_input.step = element.getAttribute('step');
});
} I guess we could even increase the max value to 1000 for example with a step of 20+ when using the keyboard. |
Forget about it, this doesn't work in fact, or not perfectly. When you release the mouse, the slider handle moves to the closest "step". May be we should do it differently and enable stepping on Will give it a try. |
Ok, doing it the other way seems to work. You just need to avoid setting the "keyboard step" when you leave the range input using the keyboard, using the tab key for example. var keyboardStep = 1;
if (parseInt(element.getAttribute('step')) > 1) {
keyboardStep = parseInt(element.getAttribute('step'));
}
if (keyboardStep > 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 = 1;
});
} Can be tested here: https://standardbm.e-bordeaux.org/image-compare-slider (first slider on page has a |
We are currently adding it as a custom
step
attribute to theimage-compare
element:And then activate it after page load using some code similar to this:
Could improve keyboard use in some cases.
The text was updated successfully, but these errors were encountered: