diff --git a/src/Umbraco.Web.UI.Client/gulp/tasks/dependencies.js b/src/Umbraco.Web.UI.Client/gulp/tasks/dependencies.js
index b5339b60c9..7c4abcf50c 100644
--- a/src/Umbraco.Web.UI.Client/gulp/tasks/dependencies.js
+++ b/src/Umbraco.Web.UI.Client/gulp/tasks/dependencies.js
@@ -207,10 +207,10 @@ function dependencies() {
         {
             "name": "nouislider",
             "src":  [
-                "./node_modules/nouislider/distribute/nouislider.min.js",
-                "./node_modules/nouislider/distribute/nouislider.min.css"
+                "./node_modules/nouislider/dist/nouislider.min.js",
+                "./node_modules/nouislider/dist/nouislider.min.css"
             ],
-            "base": "./node_modules/nouislider/distribute"
+            "base": "./node_modules/nouislider/dist"
         },
         {
             "name": "signalr",
diff --git a/src/Umbraco.Web.UI.Client/package.json b/src/Umbraco.Web.UI.Client/package.json
index 45411fad26..1221728a26 100644
--- a/src/Umbraco.Web.UI.Client/package.json
+++ b/src/Umbraco.Web.UI.Client/package.json
@@ -41,7 +41,7 @@
     "lazyload-js": "1.0.0",
     "moment": "2.22.2",
     "ng-file-upload": "12.2.13",
-    "nouislider": "14.6.4",
+    "nouislider": "15.2.0",
     "npm": "^6.14.7",
     "signalr": "2.4.0",
     "spectrum-colorpicker2": "2.0.8",
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbrangeslider.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbrangeslider.directive.js
index ed74f94f26..d5c791281c 100644
--- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbrangeslider.directive.js
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbrangeslider.directive.js
@@ -52,6 +52,7 @@ For extra details about options and events take a look here: https://refreshless
 @param {callback} onSlide (<code>callback</code>): onSlide gets triggered when the handle is being dragged.
 @param {callback} onSet (<code>callback</code>): onSet will trigger every time a slider stops changing.
 @param {callback} onChange (<code>callback</code>): onChange fires when a user stops sliding, or when a slider value is changed by 'tap'.
+@param {callback} onDrag (<code>callback</code>): onDrag fires when a connect element between handles is being dragged, while ignoring other updates to the slider values.
 @param {callback} onStart (<code>callback</code>): onStart fires when a handle is clicked (mousedown, or the equivalent touch events).
 @param {callback} onEnd (<code>callback</code>): onEnd fires when a handle is released (mouseup etc), or when a slide is canceled due to other reasons.
 **/
@@ -71,6 +72,7 @@ For extra details about options and events take a look here: https://refreshless
             onSlide: '&?',
             onSet: '&?',
             onChange: '&?',
+            onDrag: '&?',
             onStart: '&?',
             onEnd: '&?'
         }
@@ -181,6 +183,15 @@ For extra details about options and events take a look here: https://refreshless
                     });
                 }
 
+                // bind hook for drag
+                if (ctrl.onDrag) {
+                    sliderInstance.noUiSlider.on('drag', function (values, handle, unencoded, tap, positions) {
+                        $timeout(function () {
+                            ctrl.onDrag({ values: values, handle: handle, unencoded: unencoded, tap: tap, positions: positions });
+                        });
+                    });
+                }
+
                 // bind hook for start
                 if (ctrl.onStart) {
                     sliderInstance.noUiSlider.on('start', function (values, handle, unencoded, tap, positions) {