Hi Marcus,
Thanks a lot for sharing this widget, works great! I’m a beginner at the CSS stuff but with help from various examples in the forum I was able to put together a user interface for my iPad and I adapted your widget for this as well:
The only problem I’m having now is the orange ‘Active’ color for the segmented buttons doesn’t really fit with the rest of the interface… 
After using the developer tools in the browser I think the orange is the ‘Template color’ but I can’t figure out how to change it. I want to see if I can use the segmented button in more places in the interface but then I need to be able to change the active color.
I tried using
--f7-segmented-strong-button-active-bg-color: "#A1A1A1"
but that doesn’t seem to work.
Do you have any idea how to change the active color for the segmented buttons?