Mobile-friendly Number Picker Component – number-swiper

Preview:

Description:

number-swiper is a mobile-first and touch-enabled number picker component that enables the user to select numbers with touch swipe events.

How to use it:

1. Insert the stylesheet number-swiper.css and JavaScript number-swiper.js into the HTML page.

<link rel="stylesheet" href="number-swiper.css" />
<script src="number-swiper.js"></script>

2. Build the HTML for the number picker.

<div id="myNumberSwiper" class="number-swiper" data-value="">
  <ol class="number-swiper-column number-swiper-column-2" data-column="2">
    <li class="last-zero">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 id="center-2" class="number-swiper-active-number">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="last-zero">0</li>
  </ol>
    <li class="last-zero">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 id="center-1" class="number-swiper-active-number">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="last-zero">0</li>
  </ol>
  <input class="number-swiper-value" type="hidden" min="0" max="99">
</div>

3. Create a hidden input field to store the selected value.

<input class="number-swiper-value" type="hidden" min="0" max="99">

4. Initialize the number picker and done.

var numbers = new NumberSwiper('myNumberSwiper');

Changelog:

11/14/2020

• Update JS & CSS