From 88e6fb4a32d64b0cb9d544a27117b35bd79c0380 Mon Sep 17 00:00:00 2001 From: bartbutenaers Date: Wed, 27 Nov 2024 18:16:52 +0100 Subject: [PATCH 1/2] reverted slider --- docs/nodes/widgets/ui-slider.md | 2 +- nodes/widgets/locales/en-US/ui_slider.html | 2 +- ui/src/widgets/ui-slider/UISlider.vue | 8 ++++++-- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/docs/nodes/widgets/ui-slider.md b/docs/nodes/widgets/ui-slider.md index f8471ae71..0f061dbcf 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 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). 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') From dac26c7fc9b9d6eefd5bcb22368a526e394c5851 Mon Sep 17 00:00:00 2001 From: Joe Pavitt <99246719+joepavitt@users.noreply.github.com> Date: Fri, 29 Nov 2024 16:55:15 +0000 Subject: [PATCH 2/2] Update docs/nodes/widgets/ui-slider.md --- docs/nodes/widgets/ui-slider.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/nodes/widgets/ui-slider.md b/docs/nodes/widgets/ui-slider.md index 0f061dbcf..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. 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. + 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).