Analog Counter Wheel



The what I called the Analog Counter Wheel, was a proof of concept of a component for the web. My inspiration was the old counter wheels used in car dashboards, coin counters, etc

Also I wanted to build it from scratch but, I wanted it to be reusable and object oriented, so I could instantiate as many components as need and have then work independently.

The main purpose was to be a read only output component, but it also made sense to me to have an option to use it as input as well manipulating it rotating the mouse wheel. Which make it only suitable for input with a mouse because I haven’t implemented mouse drag or touch events, but I may do it in the future.


Screenshot: 4 components in a row

To use it is a simple as this


<div id="myCounter1" class="counter"></div>


var myComponent = new Counter(myCounter1);

Custom Values


Screenshot: custom Values

<div id="myCounter1" class="counter">A|B|C|D|E|F</div>


var myComponent = new Counter(myCounter1);
myComponent.values = ["A","B","C","D","E","F"];

Custom size


Screenshot: custom size

/* custom sized Counter */
#acw_example5.counter {
    width: 150px;
#acw_example5.counter .wheel {
    width: 150px;
    height: 40px;
    font-size: 20px;



Screenshot: with buttons

var c1 = new Counter(acw_example6_1);
buttonPlus1.onclick = function(){; };
buttonMinus1.onclick = function(){ c1.previous(); };


View demo on Jsfiddle. (Tumblr might not render the HTML)



Single (inverted)


Custom (1,2,3)


Custom (A,B,C,d,e,f)


Custom (words)


4 in a row

- 0

  • - 0
    • 0 - + 0 - /* custom sized Counter */ .acw-demo #acw_example5.counter { width: 150px; /*height: 30px;*/ z-index: 1; border: 2px inset #666; } .acw-demo #acw_example5.counter .wheel { /*margin-top: 5px;*/ width: 150px; height: 40px; font-size: 20px; } /* row */ .acw-demo .row span { display: inline-block; } .acw-demo .row span button { display: block; width: 100%; font-weight: bold; } /* misc */ .acw-demo { font-family: Helvetica, Arial, sans-serif; text-align: center; background-color: #F8F8F8; } .acw-demo hr{ margin: 2em 0; } //<![CDATA[ function ready(fn) { if (document.readyState != 'loading'){ fn(); } else if (document.addEventListener) { document.addEventListener('DOMContentLoaded', fn); } else { document.attachEvent('onreadystatechange', function() { if (document.readyState != 'loading') fn(); }); } } ready(function() { //instantiate counter 1 var ex1 = new Counter(acw_example1); //instantiate counter 2 var ex2 = new Counter(acw_example2); ex2.options.inverted = true; //invert counter 2 //instantiate counter 3 var ex3 = new Counter(acw_example3); //instantiate counter 4 var ex4 = new Counter(acw_example4); //instantiate counter 5 var ex5 = new Counter(acw_example5); setInterval(function(){;;;;; }, 2500); //instantiate counter 6-1 var c1 = new Counter(acw_example6_1); plus1.onclick = function (e) { //add action to + button; //increase counter 6-1 position by 1 console.log(e); //log click event }; minus1.onclick = function(){ //add action to - button c1.previous(); //decrease counter 6-1 position by 1 }; //component event c1.onChange = function(){ //event called when position of counter 6-1 changes console.log("pos changed to " + this.pos); } var c2 = new Counter(acw_example6_2); plus2.onclick = function(){; }; minus2.onclick = function(){ c2.previous();}; var c3 = new Counter(acw_example6_3); plus3.onclick = function(){; }; minus3.onclick = function(){ c3.previous(); }; var c4 = new Counter(acw_example6_4); plus4.onclick = function(){; }; minus4.onclick = function(){ c4.previous();}; }); //]]>



To create a analog-counter-wheel component you just need a div

var myComponent = new Counter(myDiv);

This will instantiate a new component and initialize it.

Public API


  • Counter.pos

    [Integer] Current Index Position

  • Counter.values

    [Array] of the possible values


  • Counter.options.mousewheel

    [boolean] enable mouse wheel manipulation

  • Counter.options.digitHeight

    [Integer] height in pixels of a single digit

  • Counter.options.inverted

    [boolean] invert direction


  • Counter.prototype.setValue(String value)

    Set the position to the position of the String value

  • Counter.prototype.getValue()

    returns the String value of the current position

  • Counter.prototype.setValue(String value)

    Set the position to the position of the value

  • Counter.prototype.getPos()

    returns the current index position

  • Counter.prototype.setPos (int index)

    Set the position to the specified index

  • Counter.prototype.moveBy(int x)

    Move by the specified amount (positive or negative)

  • Counter.prototype.moveTo(int pos)

    Move to the specified index position


    Increase the position by one

  • Counter.prototype.previous(int pos)

    Reduce the position by 1

Watch this project on GitHub

November 22nd, 2015 12:11pm Web Components HTML5 CSS3 Javascript