iOS Style Spinner In JavaScript – SpinnerPickerJs

Preview:

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

See Also:

• iOS Style Wheel Picker For Mobile – Picker.js
• iOS Style Picker View In Vanilla JavaScript – mobileSelect.js
• iOS Style Wheel picker In jQuery – Simple Wheel
• iOS Style Data picker With jQuery – iOS.picker.js
• iOS Style jQuery 3D Animated Value Selector – Drumjs

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();