Free Horizontal Scrolling Numeric Picker
Very recently, I went on a code hunt online to find some samples/plugins to reference for my current project. One of the features I was looking to build was a horizontal scroll number picker. And god did I struggle? A lot. I couldn't find one snippet that could make my life easier. I found it very weird that something like this was not easily available to learn/adapt online. I went ahead, picked up my sticky notes, and developed it like solving a problem - all using HTML, CSS, and vanilla JavaScript.
My main focus was to make sure the code is simple and yet highly customizable! With this code you can change the following things:
- The number to start the scroll with (minimum value)
- The number to end with (max value)
- The difference between each value (step value)
- The width of the scroller
- The height of the scroller
- The color scheme
I feel you can build any type of numeric picker with this simple set of codes. Feel free to download it here: https://github.com/ronaklaungani/horizontal-scroll-picker
Let me know if you would like me to build upon this, make changes, or add more stuff. I'll be happy to hear. Credit me if you feel like it. Share it with your friends. Stay safe!