iOS Style Spinner In JavaScript – SpinnerPickerJs

Category: Form | February 11, 2020
Author: StevenCyb
Views Total: 586 views
Official Page: Go to website
Last Update: February 11, 2020
License: MIT

Preview:

iOS Style Spinner In JavaScript – SpinnerPickerJs

Description:

SpinnerPickerJs is a JavaScript plugin to create user-friendly, touch-enabled spinners (spinning-wheel style pickers) just like the iOS UI picker view.

Built with vanilla JavaScript and HTML5 canvas API.

Control by:

  1. Hover and scroll with the mouse wheel or with the mousepad
  2. Hover and use the arrow-up- or w- and arrow-down- or s-key
  3. Click on the upper or lower half
  4. On mobile use the scroll gesture

How to use it:

1. Load the main spinner_picker.js script into the document when needed.

<script src="spinner_picker.js"></script>

2. To prevent overscrolling on mobile use this CSS:

body { 
  overscroll-behavior: contain;
}

3. Create a basic spinner that enables the user to select a number between (including) 0 and 20.

<canvas id="example"></canvas>
new SpinnerPicker(
    document.getElementById("example"),
    function(index) {
      // Check if the index is below zero or above 20 - Return null in this case
      if(index < 0 || index > 20) {
          return null;
      }
      return index;
    }, { index: 4 }
);

4. This is an example shows how to define options in an array.

var selectableFruits = ["Apples", "Apricots", "Avocados", "Bananas", "Boysenberries", "Blueberries", "Bing Cherry", "Cherries", "Cantaloupe", "Crab apples", "Clementine", "Cucumbers", "Damson plum", "Pluots", "Dates", "Dewberries", "Dragon Fruit", "Elderberry", "Eggfruit", "Evergreen Huckleberry", "Entawak", "Fig", "Farkleberry", "Finger Lime", "Grapefruit", "Grapes", "Gooseberries", "Guava", "Honeydew melon", "Hackberry", "Honeycrisp Apples", "Plum", "Indonesian Lime", "Imbe", "Indian Fig", "Jackfruit", "Java Apple", "Jambolan", "Kiwi", "Kaffir Lime", "Kumquat", "Lemon", "Longan", "Lychee", "Loquat", "Mango", "Mandarin Orange", "Mulberry", "Melon", "Nectarine", "Navel Orange", "Nashi Pear", "Olive", "Oranges", "Ogeechee Limes", "Oval Kumquat", "Papaya", "Persimmon", "Paw Paw", "Prickly Pear", "Peach", "Pomegranate", "Pineapple", "Quince", "Queen Anne Cherry", "Chupa Chupa", "Rambutan", "Raspberries", "Rose Hips", "Star Fruit", "Strawberries", "Sugar Baby Watermelon", "Tomato", "Tangerine", "Tamarind", "Tart Cherries", "Ugli Fruit", "Uniq Fruit", "Ugni", "Vanilla Bean", "Velvet Pink Banana", "Voavanga", "Watermelon", "Wolfberry", "White Mulberry", "Xigua", "Yellow Passion Fruit", "Yunnan Hackberry", "Yangmei", "Zig Zag Vine fruit", "Zinfandel Grapes", "Zucchini"];
new SpinnerPicker(
    document.getElementById("example"),
    function(index) {
      // Check if the index is in range of the array - Return null if its not the case
      if(index < 0 || index >= selectableFruits.length) {
        return null;
      }
      return selectableFruits[index];
    }, { 
      index: 0, 
      selection_color: "orange"
    }
);

5. Full plugin options to customize the spinner/picker.

{

  // initial option on page load
  index: 0,

  // animation speed
  animation_speed: 10,

  // step size
  animation_steps: 5,

  // text color
  font_color: "#000000",

  // text color of selected option
  selection_color: "#000000",

  // font style
  font: "Arial", 

  // enable/disable interactions
  onclick: true, 
  ondblclick: true,
  onkeydown: true,
  onwheel: true,
  ontouchmove: true,
  onresize: true 
  
}

6. Execute a function when a value is changed.

var onchanged = function(index) {
    // do something
};
SpinnerPicker(canvas, valueHandler, options, onchanged);

7. API methods.

instance.remove();
instance.getValue();
instance.setIndex(index);
instance.updateView();

You Might Be Interested In:


2 thoughts on “iOS Style Spinner In JavaScript – SpinnerPickerJs

  1. Dmitry

    The DEMO does not work on IE 11.
    All CANVAS elements are empty.
    What am I missing?

    Reply
  2. Dmitry

    Forget about the Demo not working on IE 11. It works on Chrome and in other browsers.
    But what would be nice is to be able to have a smaller text box (“normal” text box) as a spinner and only bring up the Spinner control (as in your demo) when a user clicks in the text box. Otherwise, spinner (as in your demo) takes a lot of space of the page.
    Please post it or feel free to email me.
    Thanks.

    Reply

Leave a Reply