# How to disable the mouse wheel?

**URL:** <https://discourse.nodered.org/t/how-to-disable-the-mouse-wheel/93740>\
**Category:** Dashboard\
**Tags:** ui-template\
**Created:** [6 December 2024 19:06 UTC](https://discourse.nodered.org/t/how-to-disable-the-mouse-wheel/93740 "2024-12-06T19:06:53Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Artazis](https://avatars.discourse-cdn.com/v4/letter/a/edb3f5/32.png) [@Artazis](https://discourse.nodered.org/u/Artazis)\
**Post date:** [6 December 2024 19:06 UTC](https://discourse.nodered.org/t/how-to-disable-the-mouse-wheel/93740/1 "2024-12-06T19:06:53Z")

</div>

Hello,

I have a page generated by Node-RED for managing my electric heating. I’m increasing the number of zones a bit to better manage my consumption.  
On this page, I have a lot of sliders (sliders) and the page is quite large with the hourly schedules.

The problem is that when I scroll down the page with the mouse wheel, if I hover over a slider, it changes its value. If I’m not careful, it can be annoying.

I’ve been trying for a while to disable the mouse wheel events for the sliders without success.

ChatGPT helped me write most of the code.  
The events are detected properly, but the mouse wheel remains active on the sliders.

I Use ui-template with this code

```auto
<script>
    (function() {
        // Fonction pour désactiver la molette sur un slider
        function disableSliderWheel(slider) {
            slider.addEventListener('wheel', (event) => {
console.log(`Desactivation molette slider ${slider}`);
                event.stopImmediatePropagation(); // Empêche tout autre écouteur d'exécuter cet événement
                event.preventDefault(); // Annule le comportement par défaut
            }, { passive: false }); // Permet de prévenir explicitement l'événement
        }

        // Observer les changements dans le DOM
        const observer = new MutationObserver((mutations) => {
            mutations.forEach((mutation) => {
                if (mutation.type === 'childList') {
console.log(`Mutation détectée`);
                    // Rechercher tous les sliders ajoutés dynamiquement
                    const sliders = document.querySelectorAll('md-slider');
                    sliders.forEach((slider) => {
                        if (!slider.dataset.wheelDisabled) {
                            disableSliderWheel(slider);
                            slider.dataset.wheelDisabled = true; // Marquer comme traité
                        }
                    });
                }
            });
        });

        // Configurer l'observation pour tout le document
        observer.observe(document.body, {
            childList: true,
            subtree: true
        });

        // Désactiver la molette pour les sliders déjà présents au chargement
        document.addEventListener("DOMContentLoaded", () => {
            const sliders = document.querySelectorAll('md-slider');
            sliders.forEach((slider) => {
console.log(`Desactivation molette slider déjà présent ${slider}`);
                disableSliderWheel(slider);
                slider.dataset.wheelDisabled = true;
            });
        });
    })();
</script>

```

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [6 December 2024 20:08 UTC](https://discourse.nodered.org/t/how-to-disable-the-mouse-wheel/93740/2 "2024-12-06T20:08:04Z")

</div>

Slider elements are likely to be compound elements with a shadow dom. As such, it may be that you aren't trapping the mouse wheel on the right element. You will need to use your browser dev tools to identify the exact element possible.

Alternatively, add a wheel event on `document` but just print out the `event.target.tagName` or id to see what element is actually triggered.

---

<div class="post-metadata">

**Author:** ![Artazis](https://avatars.discourse-cdn.com/v4/letter/a/edb3f5/32.png) [@Artazis](https://discourse.nodered.org/u/Artazis)\
**Post date:** [6 December 2024 21:24 UTC](https://discourse.nodered.org/t/how-to-disable-the-mouse-wheel/93740/3 "2024-12-06T21:24:33Z")

</div>

Thank you for your response. I don’t know what a shadow DOM is. I will look into it.

The slider element is:

```auto
<md-slider ng-if="me.item.outs==='all'" flex="100" min="1" max="5" step="1" 
  ng-model="me.item.value" 
  aria-label="Mode Général" 
  ng-change="me.valueChanged(10)" 
  ng-on-wheel="me.wheel($event)" 
  style="z-index: 1; touch-action: none; min-width: 32px;" 
  ng-attr-md-vertical="{{ (me.item.width < me.item.height) || undefined}}" 
  ng-attr-md-invert="{{ me.item.invert || undefined}}" 
  class="ng-pristine ng-untouched ng-valid flex-100 ng-not-empty" 
  aria-invalid="false">
    <div class="md-slider-wrapper" tabindex="0" role="slider" style="touch-action: pan-y;" aria-valuemin="1" aria-valuemax="5" aria-valuenow="3">
      <div class="md-slider-content">
        <div class="md-track-container"><div class="md-track"></div>
        <div class="md-track md-track-fill" style="width: 50%;"></div>
        <div class="md-track-ticks"></div></div>
        <div class="md-thumb-container" style="left: 50%;">
        <div class="md-thumb"></div>
        <div class="md-focus-thumb"></div>
        <div class="md-focus-ring"></div>
        <div class="md-sign">
          <span class="md-thumb-text">3</span>
        </div>
         <div class="md-disabled-thumb"></div>
        </div>
      </div>
    </div>
</md-slider>

```

There is the `me.wheel($event)` function in the `ng-on-wheel` parameter. It seems that one of the two should be modified.

> Blockquote  
> Alternatively, add a wheel event on `document` but just print out the `event.target.tagName` or id to see what element is actually triggered.

give nothing : undefined

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [6 March 2025 21:24 UTC](https://discourse.nodered.org/t/how-to-disable-the-mouse-wheel/93740/4 "2025-03-06T21:24:47Z")

</div>

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.