Slot-Machine Style Number & Option Picker In jQuery - Drum.js

Drum.js is a jQuery plugin for creating an iOS-style picker view where the users are able to select numeric values and/or select options by rotating the wheels just like a slot machine.

Fully responsive, accessible and mobile-friendly.

How to use it:

1. Include the latest version of jQuery library and the minified version of the Drum.js plugin on the web page.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/jquery.drum.min.js"></script>

2. Create an empty container for the picker view.

<div class="drum"></div>

3. Initialize the plugin to generate a basic picker view.

$('.drum').drum({
  // options here
});

4. Apply your own CSS styles to the picker view.

.drum-viewport {
  /* CSS styles here */
}

.drum-item {
  /* CSS styles here */
}

.drum {
  /* CSS styles here */
}

.drum-item-current {
  /* CSS styles here */
}

5. The plugin also supports the native select box.

<select class="language">
  <option>jQuery</option>
  <option>Script</option>
  <option>Net</option>
  <option>CSS</option>
  <option>JavaScript</option>
  <option>HTML</option>
  <option>ReactJS</option>
</select>

$('.language').drum();

6. Customize the picker view by overring the default settings as displayed below.

$('.language').drum({

  // default CSS classes
  classes: {
    'drum-viewport': 'drum-viewport',
    'drum-drum': 'drum-drum',
  },

  // numer or select
  type: 'number',
  
  // min/max value
  min: 0,
  max: Infinity,

  // step size
  step: 1,

  // asc or desc
  orderAsc: true,

  // allows dragging outside the picker
  watchOutside: true,

  // Limit where the picker can reach on the edges as part of the viewport
  // 1 means the picker can be spinned to the viewport edge but no further
  // .5 - the picker can't go further than half the viewport
  // value higher than 1 will let the picker go beyond viewport
  edgeLimit: .8,

  // acceleration (deceleration)
  acceleration: 300,

  // the maximum number of items to render
  renderItemsNum: 100,

  // the maximum offset the picker can spin to after a swipe in pixels
  maxSpinOffset: 500
  
});

7. Event handlers.

$('.drum').drum()
.on('dragstart', function(){
  // on drag start
})
.on('drag', function(){
  // during drag
})
.on('dragend', function(){
  // on drag end
})
.on('change', function(){
  // on value change
})

Changelog:

v0.1.2 (2020-04-15)

• Focus drum on click (touch)

v0.1.1 (2019-08-12)

• Fix dragend event name

---

This awesome jQuery plugin is developed by tigrr. For more Advanced Usages, please check the demo page or visit the official website.