OK, so I have found nothing that suits my needs so I thought I'd have a look at making something.
here's what I have so far;
<ion-view view-title="Camera Settings">
<ion-content class="has-header">
<ion-list>
<ion-item>
Current ISO is 400
</ion-item>
<ion-item style="padding: 0px; margin-bottom: 0px; line-height: 1;">
<div style="text-align:center; padding: 16px;">Aperture:</div>
<ion-scroll direction="x" zooming="false" has-bouncing="false" style="width: 100%;">
<!-- this is where we put the content that needs to be selected by the scrollier. -->
<div style="width: 2000px; color: white; background: #387ef5; padding: 16px 16px 21px 16px;">1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13 - 14 - 15 - 16 - 17 - 18 - 19 - 20 - 21 - 22 - 23 - 24 - 25 - 26 - 27</div>
</ion-scroll>
<div style="position: relative; top: -15px;">
<div style="height: 10px; padding: 0px;">
<div style="position: absolute; left: 50%; width: 0; height: 0; border-left:10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid white; margin-left: -5px;"></div>
</div>
<div style="background: white; padding: 16px 16px 0px 16px; text-align: center;">f/8.7</div>
</div>
</ion-item>
<ion-item style="padding: 0px; margin-bottom: 0px; line-height: 1;">
<div style="text-align:center; padding: 16px;">Shutter Speed:</div>
<ion-scroll direction="x" zooming="false" has-bouncing="false" style="width: 100%;">
<!-- this is where we put the content that needs to be selected by the scrollier. -->
<div style="width: 2000px; color: white; background: #387ef5; padding: 16px 16px 21px 16px;">8 - 4 - 2 - 1 - 1/2 - 1/4 - 1/8 - 1/15 - 1/30 …