Discussion on: Styled Range Input - A way out of Range Input nightmare

View post

@munkacsimark awesome post!
Is there a way to modify it to support multiple range inputs on the same webpage? It looks like adding additional range sliders does not pick up the special Chrome JS/styles
dev-to-uploads.s3.amazonaws.com/up...

Márk Munkácsi • Apr 21 '21

Hi @jasontipton , thanks! 😁
The example was just for one input, there was only a document.querySelector() which returns one item. For handling multiple inputs you just need to select all of them with document.querySelectorAll() and apply handler on each of them.
I modified both examples to handle multiple items. 😊

Jason Tipton • Apr 23 '21

@munkacsimark awesome solution! that makes sense, thank you!

Jason Tipton • Jun 19 '21

@munkacsimark
found that the highlighted (--webkitProgressPercent) was not working in mobile (at least not in Chrome, I did not test the other mobile browsers). I was able to get it working though by adding to the JS.

Adding here in case anyone else needs it :)

        // Desktop
        inputElement.addEventListener("mousemove", handleMove);
        inputElement.addEventListener("mousedown", handleDown);
        inputElement.addEventListener("mouseup", handleUpAndLeave);
        inputElement.addEventListener("mouseleave", handleUpAndLeave);
        inputElement.addEventListener("click", setCSSProperty);

        // Mobile
        inputElement.addEventListener("touchmove", handleMove);
        inputElement.addEventListener("touchstart", handleDown);
        inputElement.addEventListener("touchend", handleUpAndLeave);