Grow your CSS skills. Land your dream job.

Increment Inputs with the Mousewheel

Published by Chris Coyier

In the past we've covered adding +/- buttons to number-based inputs to help user interface (it's easier than typing in some circumstances). Reader Hitesh N Chavda emailed me with the idea of doing it with the scroll of the mouse wheel instead.


With the mouse cursor inside the input box, you can use the mouse scroll wheel to increment the number up and down.

Hitesh worked up a technique for doing it using jQuery, which works great. Then later he found a plugin which has already been built for dealing with mousewheel events, which is really nice and simplifies things. Just for fun the demo will leave both versions in it.

HTML

This could literally work on any element, but text inputs make the most sense. Perhaps this could be used on a time-tracking form where you need to need to enter the number of hours/minutes spent on something. Or perhaps an order form for entering how many of something to order.

In our demo we'll just have a label input pair like you'd find in just about any <form>:

<div>
    <label for="how-many">How Many? </label>
    <input type="text" id="how-many" class="wheelable" value="1" name="how-many" />
</div>

jQuery

If you want to check out the non-plugin version of this, just download the files below. We'll cover using the plugin here, for brevity. You'll need to include jQuery, the plugin, and your own JavaScript file:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/increment.js"></script>

When the DOM is ready, we'll bind the new "mousewheel" event to the input. When that input fires, if it's an "up" mousewheel scroll, we'll increment the value upwards one, if "down", it will be decremented by one (unless it's already zero).

The appending of the image on the first line is so that non JavaScript users won't see the graphic which indicates mousewheel scrollability.

$(function() {

    $("div").append('<img src="images/mousewheelupdown.png" alt="Scroll up or down with mousewheel" />');

    $("#how-many").bind("mousewheel", function(event, delta) {
        if (delta > 0) {
            this.value = parseInt(this.value) + 1;
        } else {
            if (parseInt(this.value) > 0) {
                this.value = parseInt(this.value) - 1;
            }
        }
        return false;
     });

});

What about non-numeric inputs?

You'll have to deal with that as needed. Now that you have the "mousewheel" event that the plugin provides, the function you write when that event fires could be anything. In the demo I have a text input which cycles through a list of different kinds of whales...

$("#whale").bind("mousewheel", function(event, delta) {
    if (this.value == "Blue") {
        this.value = "Sperm";
    }
    else if (this.value == "Sperm") {
        this.value = "Orca";
    }
    else if (this.value == "Orca") {
        this.value = "Humpback";
    }
    else if (this.value == "Humpback") {
        this.value = "Blue";
    }
    return false;
 });

Killer whales are getting all the press lately, time for some Humpback love.

Degradation

This is pure progressive enhancement. Without JavaScript the inputs are still inputs which behave just as any other input would.

Enjoy

View Demo   Download Files

Comments

  1. Spir
    Permalink to comment#

    Nice. Could be better if for instance with non-numeric data would be taken from a and if no js then that would rather be display.

  2. Permalink to comment#

    Web interfaces will become more convenient. Super!

  3. Permalink to comment#

    nice article. though looking at the non-numeric example I think a SWITCH case would probably work better. Actually you could even use an array.

  4. I am not sure if the usefulness of the idea but as per usual it is an interesting suggestion. My issue with it is there is not a “standard” icon for the mousewheel so I wonder if people would know that it worked off of that input.

  5. This is a very cool feature and without JS activated, the inputs work fine by just typing the value, graceful degradation at its best.

    However, this method is not intuitive.

    I mean, how does a ‘dummy’ user know that he can use the scroll wheel? The little image with the arrows is not descriptive of the function.

    I think adding a small text describing the use of the scroll wheel would be better, of course, accompanied by a graphic.

    A lot of potential with this mousewheel feature.

    Thanks for the tutorial.

  6. This is a great tutorial for the technologically minded individual, but implemented for the non-technical person could be a challenge. Figure not every one has a mouse with a wheel.

    I agree with Ricardo, maybe a tool-tip, flash data, or some other means to let users know they can quickly and interactively choose from the drop down select menu.

    • “not everyone has a mouse with a wheel”, but it it works equally well in multitouch trackpads ;)

  7. Might be better served as enhancement from a select form element, especially for non-numeric input. In some browsers, you even get the mousewheel behavior for free.

  8. Come on everyone. This is a demo on how to make it work. Not on how to get people to understand how to use it.

    Take what Chris has given you and make it to your liking.

    Very nice added feature Chris.

    • We did just what you said: we took what Chris has given us and made it to our liking.

      Read mine and Jordan’s posts again, we are offering solutions on how to make it work better in the real world, not just b!tching for the heck of it.

      And we are also agreeing that this is a great tutorial.

  9. Pretty slick. Unfortunately, I changed one of the values for Whale, and after I did that, I could no longer scroll. That might be something to consider — allowing scrolling, but not basing on the current value if it’s not in the “list”.

  10. Oo very nice

  11. Sean
    Permalink to comment#

    Interesting, but would you be locking out all the people who don’t use a mouse?

  12. Doesn’t work with a magic mouse :S

  13. Permalink to comment#

    Cool idea.

    Graceful degradation works great when they don’t have JavaScript. It would be awesome if you could gracefully degrade when their mouse doesn’t have a scroll wheel too.

  14. Cool concept!

    To avoid all those ugly if/elses just assign the value to a custom attribute and increment that the same way as a value… then just reference an array that holds all the whale types.

  15. Permalink to comment#

    With the mousewheel plugin, you can also measure how fast people are moving the mouse, so you could increment faster if they’re scrolling faster. (Like jumping 2 or 3 at a time if they’re going fast enough.)

  16. Nice Concept ^_^ Again, you’re a source of inspiration for us !! We love your tips (sorry for my English) et Bonne journée

  17. Permalink to comment#

    Right, so the delta argument dictates which way the wheel scrolls?

  18. Interesting information. Glad to see we have moved from the 90′s and are able to implement input in various ways.
    Has anyone thought of designing a web site to mimic a desktop like the fanbox site?

  19. Very very very useful. This will speed up web interaction. I’m using this from now on on most of my projects.

  20. Matt
    Permalink to comment#

    I think the tooltip would be a nice addition (probably want to add it with javascript because it seems weird to tell users they can do something if it won’t work).

    Also, would it be possible to maybe extend the area the user can scroll to include say the label and the graphic? I think that would be a nice touch (just can’t make too large of an area to break scrolling).

  21. it’s very usefull!thank you

  22. Im sitting on the fence with this one! I think feature wise it is quite cool and different etc, i can’t say Ive been on many websites that use that function… But is this for a certain reason?

    In my opinion I don’t find it very user friendly, especially if you are, as someone previously mentioned “a dummy user”. I personally prefer to click on a drop down and see a list of selections I can choose from and simply click on my desired one.

    I think using it for numbers is fine as long as the user is still able to type the number in then great. But wording wise i cant see it being used successfully.

    Just my opinion anyway!

  23. It is awesome, especially for numeric values.
    I’m gonna use this on my site for sure.
    Thanks!

  24. Gringer
    Permalink to comment#

    I think the thing should also be triggered when hovering over the arrow-symbol next to the input field.

    … instead of just when hovering on the input field.

  25. Chris,

    This discussion inspired me to release a plugin I developed for our corporate timesheet app, Increment: Increment – jQuery Plugin.

    http://www.sean-o.com/blog/index.php/2010/03/04/jquery-plugin-increment/

    It allows for efficient keyboard-based value manipulation using the arrow keys, with Shift/Ctrl/Cmd modifiers for larger/smaller changes, and optional graphic UI hints.

  26. Very cool! I like how it still degrades efficiently if there’s no javascript present.

  27. Daniel
    Permalink to comment#

    You could also use .delegate(), but it would probably be more useful when there are multiple input boxes, like on a product search results page.


    $("#page-wrap").delegate("#how-many-2", "mousewheel", function(event, delta) {
    if (delta > 0) {
    this.value = parseInt(this.value) + 1;
    } else {
    if (parseInt(this.value) > 0) {
    this.value = parseInt(this.value) - 1;
    }
    }
    return false;
    });

  28. This functionality is great, a good example of progressive enhancement. I have for many months wondered why the “numerical stepper/spinner” is not an official part of jQuery UI…or any other javascript framework for that matter.

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".