From 0c094154e29da9c6a263b2585ff45c222fd112a5 Mon Sep 17 00:00:00 2001 From: j0rgedev Date: Mon, 28 Oct 2024 19:34:00 -0500 Subject: [PATCH] fix(slider): correct range operation bug --- packages/primevue/src/slider/Slider.spec.js | 54 +++++++++++++++++++++ packages/primevue/src/slider/Slider.vue | 10 +++- 2 files changed, 62 insertions(+), 2 deletions(-) diff --git a/packages/primevue/src/slider/Slider.spec.js b/packages/primevue/src/slider/Slider.spec.js index 7f5413d68..4fbe2cc30 100644 --- a/packages/primevue/src/slider/Slider.spec.js +++ b/packages/primevue/src/slider/Slider.spec.js @@ -46,4 +46,58 @@ describe('Slider.vue', () => { expect(wrapper.emitted()['update:modelValue'][0][0]).toBe(0); }); + + it('should handle values outside range by filling the slider', async () => { + await wrapper.setProps({ min: 0, max: 200, modelValue: [-50, 250], range: true }); + + expect(wrapper.vm.rangeStartPosition).toBe(0); + + expect(wrapper.vm.rangeEndPosition).toBe(100); + + await wrapper.setProps({ min: -200, max: 200, modelValue: [-250, 250], range: true }); + + expect(wrapper.vm.rangeStartPosition).toBe(0); + + expect(wrapper.vm.rangeEndPosition).toBe(100); + }); + + it('should handle values within range', async () => { + await wrapper.setProps({ min: -100, max: 100, modelValue: [0, 50], range: true }); + + expect(wrapper.vm.rangeStartPosition).toBe(50); + + expect(wrapper.vm.rangeEndPosition).toBe(75); + }); + + it('should handle exact min and max values', async () => { + await wrapper.setProps({ min: -100, max: 100, modelValue: [-100, 100], range: true }); + + expect(wrapper.vm.rangeStartPosition).toBe(0); + + expect(wrapper.vm.rangeEndPosition).toBe(100); + }); + + it('should handle fully positive range', async () => { + await wrapper.setProps({ min: -100, max: 100, modelValue: [0, 100], range: true }); + + expect(wrapper.vm.rangeStartPosition).toBe(50); + + expect(wrapper.vm.rangeEndPosition).toBe(100); + }); + + it('should handle fully negative range', async () => { + await wrapper.setProps({ min: -200, max: -100, modelValue: [-200, -150], range: true }); + + expect(wrapper.vm.rangeStartPosition).toBe(0); + + expect(wrapper.vm.rangeEndPosition).toBe(50); + }); + + it('should treat 0 as a valid start value', async () => { + await wrapper.setProps({ min: -100, max: 100, modelValue: [0, 50], range: true }); + + expect(wrapper.vm.rangeStartPosition).toBe(50); + + expect(wrapper.vm.rangeEndPosition).toBe(75); + }); }); diff --git a/packages/primevue/src/slider/Slider.vue b/packages/primevue/src/slider/Slider.vue index cef9b30ee..814fc13f8 100755 --- a/packages/primevue/src/slider/Slider.vue +++ b/packages/primevue/src/slider/Slider.vue @@ -377,11 +377,17 @@ export default { else return ((this.value - this.min) * 100) / (this.max - this.min); }, rangeStartPosition() { - if (this.value && this.value[0]) return ((this.value[0] < this.min ? 0 : this.value[0] - this.min) * 100) / (this.max - this.min); + if (this.value && this.value[0] !== undefined) { + if (this.value[0] < this.min) return 0; + else return ((this.value[0] - this.min) * 100) / (this.max - this.min); + } else return 0; }, rangeEndPosition() { - if (this.value && this.value.length === 2) return ((this.value[1] > this.max ? 100 : this.value[1] - this.min) * 100) / (this.max - this.min); + if (this.value && this.value.length === 2 && this.value[1] !== undefined) { + if (this.value[1] > this.max) return 100; + else return ((this.value[1] - this.min) * 100) / (this.max - this.min); + } else return 100; } }