JSFiddle - React, Tailwind, and code Playground

by jmansa

HTML

<script src="http://demo.mobiscroll.com/Content/js/mobiscroll-2.5.0.full.min.js"></script>
<link rel="stylesheet" href="http://demo.mobiscroll.com/Content/css/mobiscroll-2.5.0.full.min.css">
<input ID="mystrokes" />

JavaScript

$(function () {
    var strokes = {
        '1': '1',
            '2': '2',
            '3': '3',
            '4': '4',
            '5': '5',
            '6': '6',
            '7': '7',
            '8': '8',
            '9': '9',
            '10': '10',
            '11': '11',
            '-': '12'
    };

    var puts = {
        '0': '0',
            '1': '1',
            '2': '2',
            '3': '3',
            '4': '4',
            '5+': '5'
    };

    var short = {
        '0': '0',
            '1': '1',
            '2': '2',
            '3': '3',
            '4': '4'
    };

    var wheel = [{}, {}, {}];

    wheel[0]['Stroke'] = strokes;
    wheel[1]['Putts'] = puts;
    wheel[2]['Short'] = short;

    $('#mystrokes').scroller({
        display: 'modal',
        mode: 'scroller',
        wheels: wheel,
        theme: 'default',
        animate: 'flip',
        headerText: '<p style="font-weight:bold;font-size:1.3em;">Hole 1 - Username</p>',
        height: 40
    });
});