diff --git a/addons/web_editor/static/src/js/editor/snippets.options.js b/addons/web_editor/static/src/js/editor/snippets.options.js
index 92f3896953d..8e846ebe635 100644
--- a/addons/web_editor/static/src/js/editor/snippets.options.js
+++ b/addons/web_editor/static/src/js/editor/snippets.options.js
@@ -2314,6 +2314,8 @@ const RangeUserValueWidget = UnitUserValueWidget.extend({
             this.outputEl.classList.add('ms-2');
             this.containerEl.appendChild(this.outputEl);
         }
+
+        this._onInputChange = _.debounce(this._onInputChange, 100);
     },
 
     //--------------------------------------------------------------------------
diff --git a/addons/website/static/tests/tours/gray_color_palette.js b/addons/website/static/tests/tours/gray_color_palette.js
index 19228c0c67d..cd0f0901585 100644
--- a/addons/website/static/tests/tours/gray_color_palette.js
+++ b/addons/website/static/tests/tours/gray_color_palette.js
@@ -43,6 +43,11 @@ wTourUtils.registerWebsitePreviewTour('website_gray_color_palette', {
             slider.dispatchEvent(new InputEvent('change', {bubbles: true}));
         },
     },
+    {
+        content: "Check the preview of the gray 900 after hue change",
+        trigger: '[variable="900"][style="background-color: rgb(36, 41, 33) !important;"]',
+        run: () => {}, // This is a check.
+    },
     ...waitForCSSReload(),
     {
         content: "Drag the saturation slider",
@@ -54,6 +59,11 @@ wTourUtils.registerWebsitePreviewTour('website_gray_color_palette', {
             slider.dispatchEvent(new InputEvent('change', {bubbles: true}));
         }
     },
+    {
+        content: "Check the preview of the gray 900 after saturation change",
+        trigger: '[variable="900"][style="background-color: rgb(34, 47, 27) !important;"]',
+        run: () => {}, // This is a check.
+    },
     ...waitForCSSReload(),
     {
         content: "Wait for the iframe to be loaded",