Reversed slider

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 reverted.; 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).

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>

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')