How to make use of it:

1. Include the jQuery library and the Simple Wheel plugin’s information on the web page.

<!-- jQuery -->
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<!-- Simple Wheel Plugin -->
<link rel="stylesheet" href="/path/to/css/simple-wheel.min.css" />
<script src="/path/to/js/simple-wheel.min.js"></script>

2. Create a single wheel picker from an HTML unordered checklist.

<div id="single" class="simple-wheel">
  <ul>
    <li>JavaScript</li>
    <li>HTML</li>
    <li>CSS</li>
    <li>Ruby</li>
    <li>Golang</li>
    <li>PHP</li>
    <li>Python</li>
  </ul>
</div>

__SW__.selectListItemForIndex({
  wheel: 'single',
  index: 3, // select the 4th item on page load
});

3. Fire an occasion whenever you pick on a value.

const single_wheel = document.getElementById('single');
single_wheel.addEventListener("select", function(e){
  selectedItem = __SW__.getIndexAndValOfSelectedListItem(e.target);
  $('#result_single span').text(`[${selectedItem.index}] ${selectedItem.value}`);
});

4. Create a double-wheel picker. Ideal for a date or time picker.

<div id="group" class="simple-wheel-group">
  <div id="hour" class="simple-wheel">
    <ul>
      <li>0</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li class="selected">10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li>19</li>
      <li>20</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
    </ul>
  </div>
  <div id="separator" class="simple-wheel-separator">:</div>
  <div id="minute" class="simple-wheel">
    <ul>
      <li>00</li>
      <li>10</li>
      <li>20</li>
      <li class="selected">30</li>
      <li>40</li>
      <li>50</li>
    </ul>
  </div>
</div>
<div id="result_hour">
  selected hour: <span></span>
</div>
<div id="result_minute">
  selected minute: <span></span>
</div>

$('#group .simple-wheel').on('select',function(e){
  selectedItem = __SW__.getIndexAndValOfSelectedListItem(e.target);
  const id = e.target.id
  const text = `[${selectedItem.index}] ${selectedItem.value}`;
  $(`#result_${id} span`).text(text);
});

5. Create an automated wheel picker. Ideal for a digital clock.

<div id="clock" class="simple-wheel-group">
  <div id="c_hour" class="simple-wheel">
    <ul>
      <li>0</li>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
      <li>9</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li>19</li>
      <li>20</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
    </ul>
  </div>
  <div class="simple-wheel-separator">h</div>
  <div id="c_min" class="simple-wheel">
    <ul>
      <li>00</li>
      <li>01</li>
      <li>02</li>
      <li>03</li>
      <li>04</li>
      <li>05</li>
      <li>06</li>
      <li>07</li>
      <li>08</li>
      <li>09</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li>19</li>
      <li>20</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
      <li>24</li>
      <li>25</li>
      <li>26</li>
      <li>27</li>
      <li>28</li>
      <li>29</li>
      <li>30</li>
      <li>31</li>
      <li>32</li>
      <li>33</li>
      <li>34</li>
      <li>35</li>
      <li>36</li>
      <li>37</li>
      <li>38</li>
      <li>39</li>
      <li>40</li>
      <li>41</li>
      <li>42</li>
      <li>43</li>
      <li>44</li>
      <li>45</li>
      <li>46</li>
      <li>47</li>
      <li>48</li>
      <li>49</li>
      <li>50</li>
      <li>51</li>
      <li>52</li>
      <li>53</li>
      <li>54</li>
      <li>55</li>
      <li>56</li>
      <li>57</li>
      <li>58</li>
      <li>59</li>
    </ul>
  </div>
  <div class="simple-wheel-separator">m</div>
  <div id="c_sec" class="simple-wheel">
    <ul>
      <li>00</li>
      <li>01</li>
      <li>02</li>
      <li>03</li>
      <li>04</li>
      <li>05</li>
      <li>06</li>
      <li>07</li>
      <li>08</li>
      <li>09</li>
      <li>10</li>
      <li>11</li>
      <li>12</li>
      <li>13</li>
      <li>14</li>
      <li>15</li>
      <li>16</li>
      <li>17</li>
      <li>18</li>
      <li>19</li>
      <li>20</li>
      <li>21</li>
      <li>22</li>
      <li>23</li>
      <li>24</li>
      <li>25</li>
      <li>26</li>
      <li>27</li>
      <li>28</li>
      <li>29</li>
      <li>30</li>
      <li>31</li>
      <li>32</li>
      <li>33</li>
      <li>34</li>
      <li>35</li>
      <li>36</li>
      <li>37</li>
      <li>38</li>
      <li>39</li>
      <li>40</li>
      <li>41</li>
      <li>42</li>
      <li>43</li>
      <li>44</li>
      <li>45</li>
      <li>46</li>
      <li>47</li>
      <li>48</li>
      <li>49</li>
      <li>50</li>
      <li>51</li>
      <li>52</li>
      <li>53</li>
      <li>54</li>
      <li>55</li>
      <li>56</li>
      <li>57</li>
      <li>58</li>
      <li>59</li>
    </ul>
  </div>
  <div class="simple-wheel-separator">s</div>
</div>

See Demo And Download