Merge pull request #241 from FlowFuse/113-slider-thumb-label

Add "Show Thumb Label" option for ui-slider
FlowFuse · Oct 4, 2023 · f1bc838 · f1bc838
2 parents 7700e5c + 1993f5a
commit f1bc838
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/docs/nodes/widgets/ui-slider.md b/docs/nodes/widgets/ui-slider.md
@@ -3,6 +3,8 @@ props:
     Group: Defines which group of the UI Dashboard this widget will render in.
     Size: Controls the width of the slider with respect to the parent group. Maximum value is the width of the group.
     Label: The text shown to the left of the slider.
+    Thumb Label: If true, will so a label on hte slider's thumb when moved/focussed.
+    Range: min - the minimum valu the slider can be changed to; max - the maximum value the slider can be changed to; step - the increment/decrement value when the slider is moved.
 ---
 
 <script setup>
@@ -16,7 +18,7 @@ Adds a slider to your dashboard that will emit values in Node-RED under `msg.pay
 
 <PropsTable/>
 
-## Example
+## Example - Basic
 
 ![Example of a slider](/images/node-examples/ui-slider.png "Example of a slider"){data-zoomable}
 *Example of a rendered slider in a Dashboard.*
diff --git a/nodes/widgets/ui_slider.html b/nodes/widgets/ui_slider.html
@@ -28,6 +28,7 @@
                 outs: { value: 'all' },
                 topic: { value: 'topic', validate: (hasProperty(RED.validators, 'typedInput') ? RED.validators.typedInput('topicType') : function (v) { return true }) },
                 topicType: { value: 'msg' },
+                thumbLabel: { value: true },
                 min: { value: 0, required: true, validate: RED.validators.number() },
                 max: { value: 10, required: true, validate: RED.validators.number() },
                 step: { value: 1 },
@@ -82,10 +83,6 @@
             <input type="hidden" id="node-input-height">
             <button class="editor-button" id="node-input-size"></button>
         </div>
-        <div class="form-row">
-            <label for="node-input-label"><i class="fa fa-i-cursor"></i> Label</label>
-            <input type="text" id="node-input-label">
-        </div>
         <div class="form-row">
             <label for="node-input-className"><i class="fa fa-code"></i> Class</label>
             <div style="display: inline;">
@@ -99,6 +96,15 @@
                 </a>
             </div>
         </div>
+        <div class="form-row">
+            <label for="node-input-label"><i class="fa fa-i-cursor"></i> Label</label>
+            <input type="text" id="node-input-label">
+        </div>
+        <div class="form-row">
+            <label><i class="fa fa-i-cursor"></i> Thumb</label>
+            <input type="checkbox" id="node-input-thumbLabel" style="display: inline-block; width: auto; vertical-align: top; margin: 0 3px 0 0;"/>
+            <label for="node-input-thumbLabel" style="width: 70%;"> Show Thumb Label</label>
+        </div>
         <!--<div class="form-row">
             <label for="node-input-tooltip"><i class="fa fa-info-circle"></i> Tooltip</label>
             <input type="text" id="node-input-tooltip" placeholder="optional tooltip">

diff --git a/ui/src/widgets/ui-slider/UISlider.vue b/ui/src/widgets/ui-slider/UISlider.vue
@@ -2,6 +2,7 @@
     <v-slider
         v-model="value" :label="props.label" hide-details="auto"
         :class="className"
+        :thumb-label="props.thumbLabel || false"
         :min="props.min" :max="props.max" :step="props.step || 1"
     />
 </template>