Story

Hi everyone, I’m trying to build a scrollable selection UI similar to the time picker in iOS/Android clock apps, but for the web (HTML). I think it’s a great interaction pattern for touch devices.

I’ve looked at <input type="time">, which does show a similar picker on iPhone Safari, but it’s very limited: hours are capped at 24, AM/PM can’t be removed, no support for custom options or arbitrary ranges.

I managed to create a working prototype using quite a bit of CSS and JavaScript: https://ramsicandra.com/poc/scroll_select.html

I’m wondering if there’s a simpler or more native approach to achieve this, ideally without with lesser CSS/JS?