Merge pull request #1504 from bartbutenaers/reverse-slider

Reversed slider
FlowFuse · Nov 29, 2024 · 13c32b0 · 13c32b0
2 parents 09b8d9b + dac26c7
commit 13c32b0
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 4 deletions.
diff --git a/docs/nodes/widgets/ui-slider.md b/docs/nodes/widgets/ui-slider.md
@@ -13,7 +13,7 @@ props:
         description: Defined when the ticks will be visible on the track. Defaults to 'Always'.
         dynamic: true
     Range:
-        description: min - the minimum value 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.
+        description: min - the minimum value the slider can be changed to.  When min > max then the slider will be reversed.; max - the maximum value the slider can be changed to; step - the increment/decrement value when the slider is moved.
         dynamic: true
     Color:
         description: main - color of the slider and thumb; track - color of the slider track; thumb - color of the handle. It could be the name of a color (red, green, blue, ...) or a Hex color code (#b5b5b5).

diff --git a/nodes/widgets/locales/en-US/ui_slider.html b/nodes/widgets/locales/en-US/ui_slider.html
@@ -47,7 +47,7 @@ <h3>Dynamic Properties (Inputs)</h3>
     </dl>
     <dl class="message-properties">
         <dt class="optional">min <span class="property-type">number</span></dt>
-        <dd>The minimum value available on the slider.</dd>
+        <dd>The minimum value available on the slider.  When the minimum value is larger than the maximum value, the slider will be reversed.</dd>
     </dl>
     <dl class="message-properties">
         <dt class="optional">step <span class="property-type">number</span></dt>

diff --git a/ui/src/widgets/ui-slider/UISlider.vue b/ui/src/widgets/ui-slider/UISlider.vue
@@ -7,6 +7,7 @@
         :thumb-label="thumbLabel"
         :append-icon="iconAppend" :prepend-icon="iconPrepend"
         :min="min" :direction="direction"
+        :reverse="isReverse"
         :tick-size="4" :track-size="4"
         :color="color" :track-color="colorTrack" :thumb-color="colorThumb"
         :max="max" :step="step || 1" :show-ticks="showTicks"
@@ -61,13 +62,16 @@ export default {
             return this.getProperty('showTicks')
         },
         min: function () {
-            return this.getProperty('min')
+            return Math.min(this.getProperty('min'), this.getProperty('max'))
         },
         step: function () {
             return this.getProperty('step')
         },
         max: function () {
-            return this.getProperty('max')
+            return Math.max(this.getProperty('min'), this.getProperty('max'))
+        },
+        isReverse: function () {
+            return this.getProperty('min') > this.getProperty('max')
         },
         iconPrepend: function () {
             const icon = this.getProperty('iconPrepend')