From e617fc75d45cbebeb0cf9663546098ab6c08cf6e Mon Sep 17 00:00:00 2001 From: Fabio Manganiello Date: Wed, 12 Oct 2022 02:59:50 +0200 Subject: [PATCH] Fixed slider ranges and label --- .../webapp/src/components/elements/Slider.vue | 40 +++++++++++++------ 1 file changed, 28 insertions(+), 12 deletions(-) diff --git a/platypush/backend/http/webapp/src/components/elements/Slider.vue b/platypush/backend/http/webapp/src/components/elements/Slider.vue index 9969db470..0f22155c0 100644 --- a/platypush/backend/http/webapp/src/components/elements/Slider.vue +++ b/platypush/backend/http/webapp/src/components/elements/Slider.vue @@ -1,7 +1,14 @@ @@ -62,10 +69,14 @@ export default { }, update(value) { - const percent = ((value - this.range[0]) * 100) / (this.range[1] - this.range[0]) - this.$refs.thumb.style.left = `${percent}%` + const sliderWidth = this.$refs.range.clientWidth + const percent = (value - this.range[0]) / (this.range[1] - this.range[0]) + const innerWidth = percent * sliderWidth + const thumb = this.$refs.thumb + + thumb.style.left = `${innerWidth - thumb.clientWidth / 2}px` this.$refs.thumb.style.transform = `translate(-${percent}%, -50%)` - this.$refs.track.style.width = `${percent}%` + this.$refs.track.style.width = `${innerWidth}px` }, }, @@ -77,6 +88,8 @@ export default {