A Fast, Lightweight & Mobile-friendly Number Picker Component | number-swiper

Number-Picker-Swiper

number-swiper is a rolling number selector for an elegant, mobile-friendly user interface for number selection (in javascript vanilla).

number-swiper.js is a touch-enabled quantity picker element that allows the consumer to pick numbers with contact swipe events.

How to make use of it:

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

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

2. Build the HTML for the quantity 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>
  
  <input class="number-swiper-value" type="hidden" min="0" max="99">
</div>

3. Create a hidden enter subject to retailer the chosen value.

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

4. Initialize the quantity picker and accomplished it.

var numbers = new NumberSwiper('myNumberSwiper');

Mobile-friendly Number Picker Component, Most Modern Mobile Touch Slider


See Demo And Download

Official Website(GitFr33): Click Here

This superior jQuery/javascript plugin is developed by GitFr33. For extra Advanced usage, please go to the official website.

Share