Merge pull request #6674 from j0rgedev/6649-slider-range-bug

fix(slider): correct range operation bug

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);
+    });
 });

packages/primevue/src/slider/Slider.vue

@@ -375,11 +375,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;
         }
     }