I'm stumped why the mousewheel will not increment/decrement the value in a simple form element.

```html
<input type="number" step="0.125" min="0" max="0.875">
```

It works on this snippet just fine, but not when I create a simple generic html document:

```
<!DOCTYPE html>
<html>
<head></head>
<body>
    <form action="">
        <input type="number" step="0.125" min="0" max="0.875">
    </form>
</body>
</html>

```

When I view this in several browsers, the mousewheel does not scroll. I've disabled browser extensions and such as well. Several other machines around me behave the same way.

**What causes this to not work? Is this an OS/browser issue?** 

I almost feel like this might be something deeper, possibly the type of mouse/driver issue?

---

What I have tested on:

* Win 7
* Chrome - fail
* Firefox - fail
* Firefox Dev Edition - fail
* Safari - pass
* IE11 - fail
* IE9 - fail
* OSX
* Chrome - fail
* Safari - fail
* Firefox - fail
['https://Stackoverflow.com/questions/29570594', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/901449/']
To avoid the browser issue altogether, you might try using the [jQuery mousewheel](https://github.com/jquery/jquery-mousewheel) plugin to manually change your input value. For example:

**index.html**

```
<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="jquery.mousewheel.js"></script>
    <script type="text/javascript" src="scroll.js"></script>
</head>
<body>
    <form action="">
        <input id="myInput" type="number" step="0.125" min="0" max="0.875">
    </form>
</body>
</html>

```

**scroll.js**

```
$(function() {
    $('#myInput').on("mousewheel", function(event) {
        event.preventDefault();
        $this = $(this);
        $inc = parseFloat($this.attr('step'));
        $max = parseFloat($this.attr('max'));
        $min = parseFloat($this.attr('min'));
        $currVal = parseFloat($this.val());

        // If blank, assume value of 0
        if (isNaN($currVal)) {
            $currVal = 0.0;
        }

        // Increment or decrement numeric based on scroll distance
        if (event.deltaFactor * event.deltaY > 0) {
            if ($currVal + $inc <= $max) {
                $this.val($currVal + $inc);
            }
        } else {
            if ($currVal - $inc >= $min) {
                $this.val($currVal - $inc);
            }
        }
    });
});

```

Works for me in both Chrome and Firefox. The `mousewheel` event can be triggered when the mouse is hovering over the input as well, not just when it is selected.
So I think I figured it out.

First I copied your code into a html document and opened it in Chrome, and the increment didn't work.
Second I removed everything from the code except the input box, still didn't work.

Then I injected that code into random websites using the chrome inspector, I tried it on gmail, reddit and my own website. Gmail worked, reddit worked, but my own website didn't work.

So then I disabled javascript and it didn't work anywhere.

So to answer your question, stackoverflow / many other sites use javascript that automatically add that functionality to number inputs.