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

File Size: 193 KB
Views Total: 4246
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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.

  // 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">

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


  // 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.

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


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.