diff --git a/src/components/datatable/ColumnFilter.vue b/src/components/datatable/ColumnFilter.vue
index 9818bab8c..558d704ed 100644
--- a/src/components/datatable/ColumnFilter.vue
+++ b/src/components/datatable/ColumnFilter.vue
@@ -38,7 +38,7 @@
                     </div>
                     <div class="p-column-filter-buttonbar">
                         <CFButton type="button" class="p-button-outlined p-button-sm" @click="clearFilter()" :label="clearButtonLabel"></CFButton>
-                        <CFButton type="button" class="p-button-sm" @click="applyFilter()" :label="applyButtonLabel"></CFButton>
+                        <CFButton type="button" class="p-button-sm" @click="applyFilter()" :label="applyButtonLabel" v-if="showApplyButton"></CFButton>
                     </div>
                 </template>
                 <component :is="filterFooter" :field="field" />
@@ -345,7 +345,7 @@ export default {
         bindOutsideClickListener() {
             if (!this.outsideClickListener) {
                 this.outsideClickListener = (event) => {
-                     if (this.overlayVisible && !this.selfClick && !this.isTargetClicked(event)) {
+                    if (this.overlayVisible && !this.selfClick && !this.isTargetClicked(event)) {
                         this.overlayVisible = false;
                     }
                     this.selfClick = false;
@@ -402,7 +402,7 @@ export default {
             ]
         },
         overlayClass() {
-            return [this.filterMenuyClass, {'p-column-filter-overlay p-component p-fluid': true, 'p-column-filter-overlay-menu': this.display === 'menu'}];
+            return [this.filterMenuClass, {'p-column-filter-overlay p-component p-fluid': true, 'p-column-filter-overlay-menu': this.display === 'menu'}];
         },
         showMenuButton() {
             return this.showMenu && (this.display === 'row' ? this.type !== 'boolean': true);
diff --git a/src/components/slider/Slider.vue b/src/components/slider/Slider.vue
index d2d5a0f90..ddfa155bc 100755
--- a/src/components/slider/Slider.vue
+++ b/src/components/slider/Slider.vue
@@ -87,27 +87,38 @@ export default {
         updateModel(event, value) {
             let newValue = value;
             let modelValue;
+
             if (this.range) {
+                modelValue = this.modelValue ? [...this.modelValue] : [];
+                
                 if (this.handleIndex == 0) {
+                    let maxValue = this.modelValue ? this.modelValue[1] : this.max;
+
                     if (newValue < this.min)
                         newValue = this.min;
-                    else if (newValue >= this.modelValue[1])
-                        newValue = this.modelValue[1];
+                    else if (newValue >= maxValue)
+                        newValue = maxValue;
+
+                    modelValue[0] = Math.floor(newValue);
+                    modelValue[1] = modelValue[1] || this.max;
                 }
                 else {
+                    let minValue = this.modelValue ? this.modelValue[0] : this.min;
                     if (newValue > this.max)
                         newValue = this.max;
-                    else if (newValue <= this.modelValue[0])
-                        newValue = this.modelValue[0];
+                    else if (newValue <= minValue)
+                        newValue = minValue;
+
+                    modelValue[0] = modelValue[0] || this.min;
+                    modelValue[1] = Math.floor(newValue);
                 }
-                modelValue = [...this.modelValue];
-                modelValue[this.handleIndex] = Math.floor(newValue);
             }
             else {
                 if (newValue < this.min)
                     newValue = this.min;
                 else if (newValue > this.max)
                     newValue = this.max;
+                    
                 modelValue = Math.floor(newValue);
             }
 
@@ -283,16 +294,16 @@ export default {
                 return (this.modelValue - this.min) * 100 / (this.max - this.min);
         },
         rangeStartPosition() {
-            if (this.modelValue)
+            if (this.modelValue && this.modelValue[0])
                 return (this.modelValue[0] < this.min ? 0 : this.modelValue[0] - this.min) * 100 / (this.max - this.min);
             else
                 return 0;
         },
         rangeEndPosition() {
-            if (this.modelValue)
+            if (this.modelValue && this.modelValue[1])
                 return (this.modelValue[1] > this.max ? 100 : this.modelValue[1] - this.min) * 100 / (this.max - this.min);
             else
-                return 0;
+                return 100;
         },
         rangeStartHandleStyle() {
             if (this.horizontal)
diff --git a/src/views/datatable/DataTableFilterDemo.vue b/src/views/datatable/DataTableFilterDemo.vue
index d0f12f1cd..07042fc22 100755
--- a/src/views/datatable/DataTableFilterDemo.vue
+++ b/src/views/datatable/DataTableFilterDemo.vue
@@ -108,8 +108,8 @@
                         <template #filter={filterModel}>
                             <Slider v-model="filterModel.value" range class="p-m-3"></Slider>
                             <div class="p-d-flex p-ai-center p-jc-between p-px-2">
-                                <span>{{filters1['activity'].value[0]}}</span>
-                                <span>{{filters1['activity'].value[1]}}</span>
+                                <span>{{filterModel.value ? filterModel.value[0] : 0}}</span>
+                                <span>{{filterModel.value ? filterModel.value[1] : 100}}</span>
                             </div>
                         </template>
                     </Column>
@@ -285,7 +285,7 @@ export default {
                 'date': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.IS}]},
                 'balance': {operator: FilterOperator.AND, constraints: [{value: null, matchMode: FilterMatchMode.EQUALS}]},
                 'status': {operator: FilterOperator.OR, constraints: [{value: null, matchMode: FilterMatchMode.EQUALS}]},
-                'activity': {value: [0,100], matchMode: FilterMatchMode.BETWEEN},
+                'activity': {value: null, matchMode: FilterMatchMode.BETWEEN},
                 'verified': {value: null, matchMode: FilterMatchMode.EQUALS}
             }
         }