Add preset points along a slider

client/src/styles/partials/generic/forms/sliders.scss

@@ -1,16 +1,78 @@
 .bd-slider {
-    height: 24px;
+    min-height: 24px;
+    min-width: 180px;
 
     .bd-slider-container {
-        margin-top: 8px;
+        padding-top: 8px;
-        border-radius: 8px;
+        padding-bottom: 8px;
+    }
+
+    .bd-slider-points {
+        padding: 0 5px;
+
+        .bd-slider-point {
+            left: 0;
+            margin-left: -12px;
+            position: relative;
+            top: -6px;
+            width: 24px;
+
+            color: #72767d;
+            font-size: 10px;
+            font-weight: 700;
+            margin-bottom: -26px;
+            text-align: center;
+
+            &::after {
+                content: "";
+                background-color: #4f545c;
+                height: 24px;
+                width: 2px;
+                position: relative;
+                display: block;
+                top: 4px;
+                margin-bottom: -22px;
+                margin-left: 11px;
+            }
+
+            + .bd-slider-point {
+                top: -14px;
+            }
+        }
+    }
+
+    .bd-slider-bar {
+        background-color: #4f545c;
+        height: 8px;
+        border-radius: 4px;
+        padding: 0 5px;
+        overflow: hidden;
+
+        &::before {
+            content: "";
+            background-color: $colbdblue;
+            height: 8px;
+            width: 5px;
+            display: block;
+            margin-left: -5px;
+        }
+
+        .bd-slider-bar-filled {
+            background-color: $colbdblue;
+            height: 8px;
+            width: 100%;
+            margin-top: -8px;
+        }
+    }
+
+    .bd-slider-thumb-wrap {
+        margin: -16px 0;
+        padding: 0 5px;
 
         .bd-slider-thumb {
             width: 10px;
             height: 24px;
-            display: block;
             position: relative;
-            bottom: 16px;
             pointer-events: none;
             background: #FFF;
             border: 1px solid #dcddde;
@@ -21,27 +83,14 @@
         }
     }
 
-    .bd-slider-bar {
-        background-color: #4f545c;
-        height: 8px;
-        border-radius: 4px;
-
-        .bd-slider-bar-filled {
-            background-color: $colbdblue;
-            height: 8px;
-            border-radius: 4px 0 0 4px;
-            width: 100%;
-        }
-    }
-
     input {
         border-radius: 4px;
         display: block;
-        height: 8px;
+        height: 24px;
         background-color: transparent;
         outline: none;
-        width: 180px;
+        width: 100%;
-        margin: -8px 0 0;
+        margin: -24px 0 0;
         -webkit-appearance: none;
         appearance: none;
 
@@ -53,11 +102,10 @@
             border-radius: 3px;
             cursor: ew-resize;
             height: 24px;
-            left: 0;
-            top: 50%;
             width: 10px;
             background: transparent;
             box-sizing: border-box;
+            position: relative;
         }
     }
 }

client/src/ui/components/bd/pluginsetting/Slider.vue

@@ -14,11 +14,16 @@
             <h3>{{ setting.text }}</h3>
             <div class="bd-slider">
                 <div class="bd-slider-container">
+                    <div class="bd-slider-points">
+                        <div class="bd-slider-point" v-for="(label, point) in setting.points" :style="{left: `${getPointPosition(point) * 100}%`}">{{ label }}</div>
+                    </div>
                     <div class="bd-slider-bar">
-                        <div class="bd-slider-bar-filled" :style="{width: `${(((this.setting.value - (this.setting.min || 0)) / ((this.setting.max || 100) - (this.setting.min || 0))) * 100)}%`}"></div>
+                        <div class="bd-slider-bar-filled" :style="{width: `${getPointPosition() * 100}%`}"></div>
+                    </div>
+                    <div class="bd-slider-thumb-wrap">
+                        <div class="bd-slider-thumb" v-tooltip="{content: (setting.value || '0') + setting.unit, show: toolTip, trigger: 'manual'}" :style="{left: `${getPointPosition() * 100}%`}"></div>
                     </div>
                     <input type="range" :value="setting.value" :min="setting.min || 0" :max="setting.max || 100" :step="setting.step || 1" @keyup.stop @input="input" />
-                    <span class="bd-slider-thumb" v-tooltip="{content: setting.value || '0', show: toolTip, trigger: 'manual'}" :style="{left: `${(((this.setting.value - (this.setting.min || 0)) / ((this.setting.max || 100) - (this.setting.min || 0))) * 100)}%`}"></span>
                 </div>
             </div>
         </div>
@@ -40,6 +45,9 @@
                 if (Number.isNaN(number)) return;
                 this.change(this.setting.id, number);
             },
+            getPointPosition(value) {
+                return ((value || this.setting.value) - (this.setting.min || 0)) / ((this.setting.max || 100) - (this.setting.min || 0));
+            },
             showTooltip() {
                 this.toolTip = true;
             },

tests/plugins/Example/config.json

@@ -75,9 +75,25 @@
                     "min": 0,
                     "max": 100,
                     "step": 1,
+                    "unit": "%",
                     "text": "Slider Test Setting",
                     "hint": "Slider Test Setting Hint"
                 },
+                {
+                    "id": "test-slider-2",
+                    "type": "slider",
+                    "value": 0,
+                    "min": 0,
+                    "max": 100,
+                    "step": 1,
+                    "unit": "%",
+                    "points": {
+                        "0": "0%",
+                        "100": "100%"
+                    },
+                    "text": "Slider Test Setting",
+                    "hint": "Slider with two points."
+                },
                 {
                     "id": "default-3",
                     "type": "file",