add custom styling + add pips

src/Umbraco.Web.UI.Client/src/less/belle.less

@@ -151,6 +151,7 @@
 @import "components/umb-number-badge.less";
 @import "components/umb-progress-circle.less";
 @import "components/umb-stylesheet.less";
+@import "components/umb-range-slider.less";
 
 @import "components/buttons/umb-button.less";
 @import "components/buttons/umb-button-group.less";

src/Umbraco.Web.UI.Client/src/less/components/umb-range-slider.less

@@ -0,0 +1,39 @@
+
+
+.umb-range-slider.noUi-target {
+    background: linear-gradient(to bottom, #f5f5f5 0%, #f9f9f9 100%);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+    border-radius: 20px;
+    height: 10px;
+    border: none;
+}
+
+.umb-range-slider .noUi-handle {
+    border-radius: 100px;
+    border: none;
+    box-shadow: none;
+    width: 20px !important;
+    height: 20px !important;
+    background-color: @turquoise;
+}
+
+.umb-range-slider .noUi-handle::before {
+    display: none;
+}
+
+.umb-range-slider .noUi-handle::after {
+    display: none;
+}
+
+.umb-range-slider .noUi-handle {
+    right: -10px !important; // half the handle width
+}
+
+.umb-range-slider .noUi-marker-large.noUi-marker-horizontal {
+    height: 10px;
+}
+
+.umb-range-slider .noUi-marker.noUi-marker-horizontal {
+    width: 1px;
+}
+

src/Umbraco.Web.UI.Client/src/views/propertyeditors/slider/slider.controller.js

@@ -216,9 +216,19 @@
             "range": {
                 "min": min,
                 "max": max
+            },
+            "pips": {
+                mode: 'steps',
+                density: 100,
+                filter: filterPips
             }
         };
 
+        function filterPips(value, type) {
+            // show a pip for min and maximum value
+            return value === $scope.model.config.minVal || value === $scope.model.config.maxVal ? 1 : -1;
+        }
+
         //tell the assetsService to load the bootstrap slider
         //libs from the plugin folder
         assetsService