diff --git a/docs/nodes/widgets/ui-slider.md b/docs/nodes/widgets/ui-slider.md
index f8471ae71..bf21e2708 100644
--- 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
index 95ee9368f..aba9a5664 100644
--- a/nodes/widgets/locales/en-US/ui_slider.html
+++ b/nodes/widgets/locales/en-US/ui_slider.html
@@ -47,7 +47,7 @@
Dynamic Properties (Inputs)
- min number
- - The minimum value available on the slider.
+ - The minimum value available on the slider. When the minimum value is larger than the maximum value, the slider will be reversed.
- step number
diff --git a/ui/src/widgets/ui-slider/UISlider.vue b/ui/src/widgets/ui-slider/UISlider.vue
index 18e4289d8..910d78170 100644
--- 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')