range spinner for ionic

[BenWard]

Hi Guys,

I'm after a user interface element for ionic that operates like a cross between a range slider http://ionicframework.com/docs/components/#range and spinner.

Essentially the 'button' or tag that you would drag from side to side in a range needs to stay in the middle, but as you swipe, the scale in the background slides past it. The idea is for a simple camera exposure calculator and I want the settings to resemble looking down onto a camera lens from above and rotating the aperture ring or shutter speed selector. The camera body has an arrow pointing to some point on the ring and as you rotate it, the scale/numbers rotate past the pointer.

Before I go and spend 47 hours cobbling together a poorly written attempt at this with a combination of dodgy css and 'borrowed' JS canvas code that doesn't work properly and runs slow, does anyone know of an existing open source CSS/JS/HTML5 ui element that does this or that I could more easily customise/modify?

any ideas would be much appreciated :)

Thanks
Ben

[BenWard]

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 - 1/60 - 1/125 - 1/250 - 1/500 - 1/1000 - 1/2000</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;">1/125</div>
            </div>
        </ion-item>
        </ion-list>
    </ion-content>   
</ion-view>

This uses the ionic directive ionScroll to horizontally scroll the numbers on the bar left and right past the little pointer.

I now need to figure out some way of determining the left-right scroll position so I can pick up the decimal value that the arrow is pointing to. That's going to be tricky :/ any ideas welcome.

I also need to be able to set the scroll position programatically. Again; tricky.