# Disable scroll wheel increment and decrement on numeric entry field component

**URL:** <https://forum.inductiveautomation.com/t/disable-scroll-wheel-increment-and-decrement-on-numeric-entry-field-component/91876>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [June 14, 2024, 3:17pm UTC](https://forum.inductiveautomation.com/t/disable-scroll-wheel-increment-and-decrement-on-numeric-entry-field-component/91876 "2024-06-14T15:17:32Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![chandler](https://avatars.discourse-cdn.com/v4/letter/c/e9a140/32.png) [@chandler](https://forum.inductiveautomation.com/u/chandler)\
**Post date:** [June 14, 2024, 3:17pm UTC](https://forum.inductiveautomation.com/t/disable-scroll-wheel-increment-and-decrement-on-numeric-entry-field-component/91876/1 "2024-06-14T15:17:32Z")

</div>

When the mouse is over the component and it is focused the scroll wheel changes the value. Does anybody know a way to disable this feature?  
 ![scroll](https://us1.discourse-cdn.com/inductiveautomation/original/3X/0/e/0eea1c5404af1d3a5825eccc46d41d71e3c0fb89.gif)

---

<div class="post-metadata">

**Author:** ![jbexten](https://avatars.discourse-cdn.com/v4/letter/j/4da419/32.png) [@jbexten](https://forum.inductiveautomation.com/u/jbexten)\
**Post date:** [June 14, 2024, 3:51pm UTC](https://forum.inductiveautomation.com/t/disable-scroll-wheel-increment-and-decrement-on-numeric-entry-field-component/91876/2 "2024-06-14T15:51:37Z")

</div>

I've been down this road many times and found that the only way to accomplish this was by adding JavaScript 😕

If you add a domId to your component and then add a markdown component and add:

```python
<img style='display:none' src='/favicon.ico' onload="
        const numberInputs = document.querySelectorAll('#your_domId');
        numberInputs.forEach(function(input) {
            input.addEventListener('wheel', function(event) {
                event.preventDefault();
            });
        });
">

```

to the source it should work!

---

<div class="post-metadata">

**Author:** ![Bryan\_Keating](https://avatars.discourse-cdn.com/v4/letter/b/8baadc/32.png) [@Bryan\_Keating](https://forum.inductiveautomation.com/u/Bryan_Keating)\
**Post date:** [June 17, 2024, 9:12pm UTC](https://forum.inductiveautomation.com/t/disable-scroll-wheel-increment-and-decrement-on-numeric-entry-field-component/91876/3 "2024-06-17T21:12:44Z")

</div>

Glad this could be solved. A couple of follow up questions:

-I'm not clear on how to add a markdown component. Is this a matter of adding a "source" property to props like so:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/d/dd39f50b1ffa54860a0f335e4c38f77da88eb08c.png)

-Does the domId have the # symbol before it or in this case would the domId be NumericEntry.

Thanks

---

<div class="post-metadata">

**Author:** ![chandler](https://avatars.discourse-cdn.com/v4/letter/c/e9a140/32.png) [@chandler](https://forum.inductiveautomation.com/u/chandler)\
**Post date:** [June 17, 2024, 9:21pm UTC](https://forum.inductiveautomation.com/t/disable-scroll-wheel-increment-and-decrement-on-numeric-entry-field-component/91876/4 "2024-06-17T21:21:58Z")

</div>

You can find the Markdown component under the "Display" section of the Perspective Components panel in the designer:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/6/461851808216ae1989f8e8829a6d09a6853a2ca9.png)  
The Markdown component has a source property by default and that is where you put the javascript code that @jbexten posted above:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/c/3c6e654258cd9ac3712865243b56dab39fc24801.png)

Lastly, The domId that you put on the numeric entry component goes in the Meta properties and it should not have a #:  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/a/1a9328db28ba66d6e5809c42966146c01ee4e5f0.png)