primevue 4.1.1 → 4.2.0

package/slider/Slider.vue

@@ -1,19 +1,20 @@
 <template>
     <div :class="cx('root')" @click="onBarClick" v-bind="ptmi('root')" :data-p-sliding="false">
-        <span :class="cx('range')" :style="[sx('range'), rangeStyle]" v-bind="ptm('range')"></span>
+        <span :class="cx('range')" :style="[sx('range'), rangeStyle()]" v-bind="ptm('range')"></span>
         <span
             v-if="!range"
             :class="cx('handle')"
-            :style="[sx('handle'), handleStyle]"
+            :style="[sx('handle'), handleStyle()]"
             @touchstart.passive="onDragStart($event)"
             @touchmove.passive="onDrag($event)"
             @touchend="onDragEnd($event)"
             @mousedown="onMouseDown($event)"
             @keydown="onKeyDown($event)"
+            @blur="onBlur($event)"
             :tabindex="tabindex"
             role="slider"
             :aria-valuemin="min"
-            :aria-valuenow="modelValue"
+            :aria-valuenow="d_value"
             :aria-valuemax="max"
             :aria-labelledby="ariaLabelledby"
             :aria-label="ariaLabel"
@@ -23,16 +24,17 @@
         <span
             v-if="range"
             :class="cx('handle')"
-            :style="[sx('handle'), rangeStartHandleStyle]"
+            :style="[sx('handle'), rangeStartHandleStyle()]"
             @touchstart.passive="onDragStart($event, 0)"
             @touchmove.passive="onDrag($event)"
             @touchend="onDragEnd($event)"
             @mousedown="onMouseDown($event, 0)"
             @keydown="onKeyDown($event, 0)"
+            @blur="onBlur($event, 0)"
             :tabindex="tabindex"
             role="slider"
             :aria-valuemin="min"
-            :aria-valuenow="modelValue ? modelValue[0] : null"
+            :aria-valuenow="d_value ? d_value[0] : null"
             :aria-valuemax="max"
             :aria-labelledby="ariaLabelledby"
             :aria-label="ariaLabel"
@@ -42,16 +44,17 @@
         <span
             v-if="range"
             :class="cx('handle')"
-            :style="[sx('handle'), rangeEndHandleStyle]"
+            :style="[sx('handle'), rangeEndHandleStyle()]"
             @touchstart.passive="onDragStart($event, 1)"
             @touchmove.passive="onDrag($event)"
             @touchend="onDragEnd($event)"
             @mousedown="onMouseDown($event, 1)"
             @keydown="onKeyDown($event, 1)"
+            @blur="onBlur($event, 1)"
             :tabindex="tabindex"
             role="slider"
             :aria-valuemin="min"
-            :aria-valuenow="modelValue ? modelValue[1] : null"
+            :aria-valuenow="d_value ? d_value[1] : null"
             :aria-valuemax="max"
             :aria-labelledby="ariaLabelledby"
             :aria-label="ariaLabel"
@@ -62,14 +65,14 @@
 </template>
 
 <script>
-import { getWindowScrollLeft, getWindowScrollTop, getAttribute } from '@primeuix/utils/dom';
+import { getAttribute, getWindowScrollLeft, getWindowScrollTop } from '@primeuix/utils/dom';
 import BaseSlider from './BaseSlider.vue';
 
 export default {
     name: 'Slider',
     extends: BaseSlider,
     inheritAttrs: false,
-    emits: ['update:modelValue', 'change', 'slideend'],
+    emits: ['change', 'slideend'],
     dragging: false,
     handleIndex: null,
     initX: null,
@@ -78,8 +81,22 @@ export default {
     barHeight: null,
     dragListener: null,
     dragEndListener: null,
+    mutationObserver: null,
+    data() {
+        return {
+            isRTL: false
+        };
+    },
     beforeUnmount() {
         this.unbindDragListeners();
+
+        if (this.mutationObserver) {
+            this.mutationObserver.disconnect();
+        }
+    },
+    mounted() {
+        this.updateDirection();
+        this.observeDirectionChanges();
     },
     methods: {
         updateDomData() {
@@ -95,8 +112,16 @@ export default {
             let pageX = event.touches ? event.touches[0].pageX : event.pageX;
             let pageY = event.touches ? event.touches[0].pageY : event.pageY;
 
-            if (this.orientation === 'horizontal') handleValue = ((pageX - this.initX) * 100) / this.barWidth;
-            else handleValue = ((this.initY + this.barHeight - pageY) * 100) / this.barHeight;
+            if (this.orientation === 'horizontal') {
+                if (this.isRTL) {
+                    handleValue = ((this.initX + this.barWidth - pageX) * 100) / this.barWidth;
+                } else {
+                    handleValue = ((pageX - this.initX) * 100) / this.barWidth;
+                }
+            } else {
+                handleValue = ((this.initY + this.barHeight - pageY) * 100) / this.barHeight;
+            }
+
             let newValue = (this.max - this.min) * (handleValue / 100) + this.min;
 
             if (this.step) {
@@ -136,7 +161,7 @@ export default {
                 modelValue = newValue;
             }
 
-            this.$emit('update:modelValue', modelValue);
+            this.writeValue(modelValue, event);
             this.$emit('change', modelValue);
         },
         onDragStart(event, index) {
@@ -224,6 +249,9 @@ export default {
                     break;
             }
         },
+        onBlur(event, index) {
+            this.formField.onBlur?.(event);
+        },
         decrementValue(event, index, pageKey = false) {
             let newValue;
 
@@ -275,15 +303,67 @@ export default {
                 document.removeEventListener('mouseup', this.dragEndListener);
                 this.dragEndListener = null;
             }
+        },
+        rangeStyle() {
+            if (this.range) {
+                const rangeSliderWidth = this.rangeEndPosition > this.rangeStartPosition ? this.rangeEndPosition - this.rangeStartPosition : this.rangeStartPosition - this.rangeEndPosition;
+                const rangeSliderPosition = this.rangeEndPosition > this.rangeStartPosition ? this.rangeStartPosition : this.rangeEndPosition;
+
+                if (this.horizontal) {
+                    return this.isRTL ? { right: rangeSliderPosition + '%', width: rangeSliderWidth + '%' } : { left: rangeSliderPosition + '%', width: rangeSliderWidth + '%' };
+                } else {
+                    return { bottom: rangeSliderPosition + '%', height: rangeSliderWidth + '%' };
+                }
+            } else {
+                if (this.horizontal) {
+                    return { width: this.handlePosition + '%' };
+                } else {
+                    return { height: this.handlePosition + '%' };
+                }
+            }
+        },
+        handleStyle() {
+            if (this.horizontal) {
+                return this.isRTL ? { right: this.handlePosition + '%' } : { left: this.handlePosition + '%' };
+            } else {
+                return { bottom: this.handlePosition + '%' };
+            }
+        },
+        rangeStartHandleStyle() {
+            if (this.horizontal) {
+                return this.isRTL ? { right: this.rangeStartPosition + '%' } : { left: this.rangeStartPosition + '%' };
+            } else {
+                return { bottom: this.rangeStartPosition + '%' };
+            }
+        },
+        rangeEndHandleStyle() {
+            if (this.horizontal) {
+                return this.isRTL ? { right: this.rangeEndPosition + '%' } : { left: this.rangeEndPosition + '%' };
+            } else {
+                return { bottom: this.rangeEndPosition + '%' };
+            }
+        },
+        updateDirection() {
+            this.isRTL = !!this.$el.closest('[dir="rtl"]');
+        },
+        observeDirectionChanges() {
+            const targetNode = document.documentElement;
+            const config = { attributes: true, attributeFilter: ['dir'] };
+
+            this.mutationObserver = new MutationObserver(() => {
+                this.updateDirection();
+            });
+
+            this.mutationObserver.observe(targetNode, config);
         }
     },
     computed: {
         value() {
             if (this.range) {
-                return [this.modelValue?.[0] ?? this.min, this.modelValue?.[1] ?? this.max];
+                return [this.d_value?.[0] ?? this.min, this.d_value?.[1] ?? this.max];
             }
 
-            return this.modelValue ?? this.min;
+            return this.d_value ?? this.min;
         },
         horizontal() {
             return this.orientation === 'horizontal';
@@ -291,22 +371,6 @@ export default {
         vertical() {
             return this.orientation === 'vertical';
         },
-        rangeStyle() {
-            if (this.range) {
-                const rangeSliderWidth = this.rangeEndPosition > this.rangeStartPosition ? this.rangeEndPosition - this.rangeStartPosition : this.rangeStartPosition - this.rangeEndPosition;
-                const rangeSliderPosition = this.rangeEndPosition > this.rangeStartPosition ? this.rangeStartPosition : this.rangeEndPosition;
-
-                if (this.horizontal) return { left: rangeSliderPosition + '%', width: rangeSliderWidth + '%' };
-                else return { bottom: rangeSliderPosition + '%', height: rangeSliderWidth + '%' };
-            } else {
-                if (this.horizontal) return { width: this.handlePosition + '%' };
-                else return { height: this.handlePosition + '%' };
-            }
-        },
-        handleStyle() {
-            if (this.horizontal) return { left: this.handlePosition + '%' };
-            else return { bottom: this.handlePosition + '%' };
-        },
         handlePosition() {
             if (this.value < this.min) return 0;
             else if (this.value > this.max) return 100;
@@ -319,14 +383,6 @@ export default {
         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);
             else return 100;
-        },
-        rangeStartHandleStyle() {
-            if (this.horizontal) return { left: this.rangeStartPosition + '%' };
-            else return { bottom: this.rangeStartPosition + '%' };
-        },
-        rangeEndHandleStyle() {
-            if (this.horizontal) return { left: this.rangeEndPosition + '%' };
-            else return { bottom: this.rangeEndPosition + '%' };
         }
     }
 };

package/slider/index.d.ts

@@ -101,6 +101,14 @@ export interface SliderProps {
      * Value of the component.
      */
     modelValue?: number | number[] | undefined;
+    /**
+     * The default value for the input when not controlled by `modelValue`.
+     */
+    defaultValue?: number | number[] | undefined;
+    /**
+     * The name attribute for the element, typically used in form submissions.
+     */
+    name?: string | undefined;
     /**
      * Mininum boundary value.
      * @defaultValue 0
@@ -126,6 +134,11 @@ export interface SliderProps {
      * @defaultValue false
      */
     range?: boolean | undefined;
+    /**
+     * When present, it specifies that the component should have invalid state style.
+     * @defaultValue false
+     */
+    invalid?: boolean | undefined;
     /**
      * When present, it specifies that the component should be disabled.
      * @defaultValue false
@@ -143,6 +156,10 @@ export interface SliderProps {
      * Used to define a string that labels the element.
      */
     ariaLabel?: string | undefined;
+    /**
+     * Form control object, typically used for handling validation and form state.
+     */
+    formControl?: Record<string, any> | undefined;
     /**
      * It generates scoped CSS variables using design tokens for the component.
      */
@@ -178,6 +195,11 @@ export interface SliderEmitsOptions {
      * @param {number | number[]} value - New value.
      */
     'update:modelValue'(value: number | number[]): void;
+    /**
+     * Emitted when the value changes in uncontrolled mode.
+     * @param {number | number[]} value - New value.
+     */
+    'value-change'(value: number | number[]): void;
     /**
      * Callback to invoke on value change.
      * @param {number} value - New value

package/slider/index.mjs

@@ -1,13 +1,12 @@
 import { getWindowScrollLeft, getWindowScrollTop, getAttribute } from '@primeuix/utils/dom';
-import BaseComponent from '@primevue/core/basecomponent';
+import BaseEditableHolder from '@primevue/core/baseeditableholder';
 import SliderStyle from 'primevue/slider/style';
 import { openBlock, createElementBlock, mergeProps, createElementVNode, createCommentVNode } from 'vue';
 
 var script$1 = {
   name: 'BaseSlider',
-  "extends": BaseComponent,
+  "extends": BaseEditableHolder,
   props: {
-    modelValue: [Number, Array],
     min: {
       type: Number,
       "default": 0
@@ -28,10 +27,6 @@ var script$1 = {
       type: Boolean,
       "default": false
     },
-    disabled: {
-      type: Boolean,
-      "default": false
-    },
     tabindex: {
       type: Number,
       "default": 0
@@ -64,7 +59,7 @@ var script = {
   name: 'Slider',
   "extends": script$1,
   inheritAttrs: false,
-  emits: ['update:modelValue', 'change', 'slideend'],
+  emits: ['change', 'slideend'],
   dragging: false,
   handleIndex: null,
   initX: null,
@@ -73,8 +68,21 @@ var script = {
   barHeight: null,
   dragListener: null,
   dragEndListener: null,
+  mutationObserver: null,
+  data: function data() {
+    return {
+      isRTL: false
+    };
+  },
   beforeUnmount: function beforeUnmount() {
     this.unbindDragListeners();
+    if (this.mutationObserver) {
+      this.mutationObserver.disconnect();
+    }
+  },
+  mounted: function mounted() {
+    this.updateDirection();
+    this.observeDirectionChanges();
   },
   methods: {
     updateDomData: function updateDomData() {
@@ -88,7 +96,15 @@ var script = {
       var handleValue;
       var pageX = event.touches ? event.touches[0].pageX : event.pageX;
       var pageY = event.touches ? event.touches[0].pageY : event.pageY;
-      if (this.orientation === 'horizontal') handleValue = (pageX - this.initX) * 100 / this.barWidth;else handleValue = (this.initY + this.barHeight - pageY) * 100 / this.barHeight;
+      if (this.orientation === 'horizontal') {
+        if (this.isRTL) {
+          handleValue = (this.initX + this.barWidth - pageX) * 100 / this.barWidth;
+        } else {
+          handleValue = (pageX - this.initX) * 100 / this.barWidth;
+        }
+      } else {
+        handleValue = (this.initY + this.barHeight - pageY) * 100 / this.barHeight;
+      }
       var newValue = (this.max - this.min) * (handleValue / 100) + this.min;
       if (this.step) {
         var oldValue = this.range ? this.value[this.handleIndex] : this.value;
@@ -115,7 +131,7 @@ var script = {
         if (newValue < this.min) newValue = this.min;else if (newValue > this.max) newValue = this.max;
         modelValue = newValue;
       }
-      this.$emit('update:modelValue', modelValue);
+      this.writeValue(modelValue, event);
       this.$emit('change', modelValue);
     },
     onDragStart: function onDragStart(event, index) {
@@ -193,6 +209,10 @@ var script = {
           break;
       }
     },
+    onBlur: function onBlur(event, index) {
+      var _this$formField$onBlu, _this$formField;
+      (_this$formField$onBlu = (_this$formField = this.formField).onBlur) === null || _this$formField$onBlu === void 0 || _this$formField$onBlu.call(_this$formField, event);
+    },
     decrementValue: function decrementValue(event, index) {
       var pageKey = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
       var newValue;
@@ -234,16 +254,100 @@ var script = {
         document.removeEventListener('mouseup', this.dragEndListener);
         this.dragEndListener = null;
       }
+    },
+    rangeStyle: function rangeStyle() {
+      if (this.range) {
+        var rangeSliderWidth = this.rangeEndPosition > this.rangeStartPosition ? this.rangeEndPosition - this.rangeStartPosition : this.rangeStartPosition - this.rangeEndPosition;
+        var rangeSliderPosition = this.rangeEndPosition > this.rangeStartPosition ? this.rangeStartPosition : this.rangeEndPosition;
+        if (this.horizontal) {
+          return this.isRTL ? {
+            right: rangeSliderPosition + '%',
+            width: rangeSliderWidth + '%'
+          } : {
+            left: rangeSliderPosition + '%',
+            width: rangeSliderWidth + '%'
+          };
+        } else {
+          return {
+            bottom: rangeSliderPosition + '%',
+            height: rangeSliderWidth + '%'
+          };
+        }
+      } else {
+        if (this.horizontal) {
+          return {
+            width: this.handlePosition + '%'
+          };
+        } else {
+          return {
+            height: this.handlePosition + '%'
+          };
+        }
+      }
+    },
+    handleStyle: function handleStyle() {
+      if (this.horizontal) {
+        return this.isRTL ? {
+          right: this.handlePosition + '%'
+        } : {
+          left: this.handlePosition + '%'
+        };
+      } else {
+        return {
+          bottom: this.handlePosition + '%'
+        };
+      }
+    },
+    rangeStartHandleStyle: function rangeStartHandleStyle() {
+      if (this.horizontal) {
+        return this.isRTL ? {
+          right: this.rangeStartPosition + '%'
+        } : {
+          left: this.rangeStartPosition + '%'
+        };
+      } else {
+        return {
+          bottom: this.rangeStartPosition + '%'
+        };
+      }
+    },
+    rangeEndHandleStyle: function rangeEndHandleStyle() {
+      if (this.horizontal) {
+        return this.isRTL ? {
+          right: this.rangeEndPosition + '%'
+        } : {
+          left: this.rangeEndPosition + '%'
+        };
+      } else {
+        return {
+          bottom: this.rangeEndPosition + '%'
+        };
+      }
+    },
+    updateDirection: function updateDirection() {
+      this.isRTL = !!this.$el.closest('[dir="rtl"]');
+    },
+    observeDirectionChanges: function observeDirectionChanges() {
+      var _this = this;
+      var targetNode = document.documentElement;
+      var config = {
+        attributes: true,
+        attributeFilter: ['dir']
+      };
+      this.mutationObserver = new MutationObserver(function () {
+        _this.updateDirection();
+      });
+      this.mutationObserver.observe(targetNode, config);
     }
   },
   computed: {
     value: function value() {
-      var _this$modelValue3;
+      var _this$d_value3;
       if (this.range) {
-        var _this$modelValue$, _this$modelValue, _this$modelValue$2, _this$modelValue2;
-        return [(_this$modelValue$ = (_this$modelValue = this.modelValue) === null || _this$modelValue === void 0 ? void 0 : _this$modelValue[0]) !== null && _this$modelValue$ !== void 0 ? _this$modelValue$ : this.min, (_this$modelValue$2 = (_this$modelValue2 = this.modelValue) === null || _this$modelValue2 === void 0 ? void 0 : _this$modelValue2[1]) !== null && _this$modelValue$2 !== void 0 ? _this$modelValue$2 : this.max];
+        var _this$d_value$, _this$d_value, _this$d_value$2, _this$d_value2;
+        return [(_this$d_value$ = (_this$d_value = this.d_value) === null || _this$d_value === void 0 ? void 0 : _this$d_value[0]) !== null && _this$d_value$ !== void 0 ? _this$d_value$ : this.min, (_this$d_value$2 = (_this$d_value2 = this.d_value) === null || _this$d_value2 === void 0 ? void 0 : _this$d_value2[1]) !== null && _this$d_value$2 !== void 0 ? _this$d_value$2 : this.max];
       }
-      return (_this$modelValue3 = this.modelValue) !== null && _this$modelValue3 !== void 0 ? _this$modelValue3 : this.min;
+      return (_this$d_value3 = this.d_value) !== null && _this$d_value3 !== void 0 ? _this$d_value3 : this.min;
     },
     horizontal: function horizontal() {
       return this.orientation === 'horizontal';
@@ -251,32 +355,6 @@ var script = {
     vertical: function vertical() {
       return this.orientation === 'vertical';
     },
-    rangeStyle: function rangeStyle() {
-      if (this.range) {
-        var rangeSliderWidth = this.rangeEndPosition > this.rangeStartPosition ? this.rangeEndPosition - this.rangeStartPosition : this.rangeStartPosition - this.rangeEndPosition;
-        var rangeSliderPosition = this.rangeEndPosition > this.rangeStartPosition ? this.rangeStartPosition : this.rangeEndPosition;
-        if (this.horizontal) return {
-          left: rangeSliderPosition + '%',
-          width: rangeSliderWidth + '%'
-        };else return {
-          bottom: rangeSliderPosition + '%',
-          height: rangeSliderWidth + '%'
-        };
-      } else {
-        if (this.horizontal) return {
-          width: this.handlePosition + '%'
-        };else return {
-          height: this.handlePosition + '%'
-        };
-      }
-    },
-    handleStyle: function handleStyle() {
-      if (this.horizontal) return {
-        left: this.handlePosition + '%'
-      };else return {
-        bottom: this.handlePosition + '%'
-      };
-    },
     handlePosition: function handlePosition() {
       if (this.value < this.min) return 0;else if (this.value > this.max) return 100;else return (this.value - this.min) * 100 / (this.max - this.min);
     },
@@ -285,20 +363,6 @@ var script = {
     },
     rangeEndPosition: function 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);else return 100;
-    },
-    rangeStartHandleStyle: function rangeStartHandleStyle() {
-      if (this.horizontal) return {
-        left: this.rangeStartPosition + '%'
-      };else return {
-        bottom: this.rangeStartPosition + '%'
-      };
-    },
-    rangeEndHandleStyle: function rangeEndHandleStyle() {
-      if (this.horizontal) return {
-        left: this.rangeEndPosition + '%'
-      };else return {
-        bottom: this.rangeEndPosition + '%'
-      };
     }
   }
 };
@@ -309,18 +373,18 @@ var _hoisted_3 = ["tabindex", "aria-valuemin", "aria-valuenow", "aria-valuemax",
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return openBlock(), createElementBlock("div", mergeProps({
     "class": _ctx.cx('root'),
-    onClick: _cache[15] || (_cache[15] = function () {
+    onClick: _cache[18] || (_cache[18] = function () {
       return $options.onBarClick && $options.onBarClick.apply($options, arguments);
     })
   }, _ctx.ptmi('root'), {
     "data-p-sliding": false
   }), [createElementVNode("span", mergeProps({
     "class": _ctx.cx('range'),
-    style: [_ctx.sx('range'), $options.rangeStyle]
+    style: [_ctx.sx('range'), $options.rangeStyle()]
   }, _ctx.ptm('range')), null, 16), !_ctx.range ? (openBlock(), createElementBlock("span", mergeProps({
     key: 0,
     "class": _ctx.cx('handle'),
-    style: [_ctx.sx('handle'), $options.handleStyle],
+    style: [_ctx.sx('handle'), $options.handleStyle()],
     onTouchstartPassive: _cache[0] || (_cache[0] = function ($event) {
       return $options.onDragStart($event);
     }),
@@ -336,10 +400,13 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     onKeydown: _cache[4] || (_cache[4] = function ($event) {
       return $options.onKeyDown($event);
     }),
+    onBlur: _cache[5] || (_cache[5] = function ($event) {
+      return $options.onBlur($event);
+    }),
     tabindex: _ctx.tabindex,
     role: "slider",
     "aria-valuemin": _ctx.min,
-    "aria-valuenow": _ctx.modelValue,
+    "aria-valuenow": _ctx.d_value,
     "aria-valuemax": _ctx.max,
     "aria-labelledby": _ctx.ariaLabelledby,
     "aria-label": _ctx.ariaLabel,
@@ -347,26 +414,29 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, _ctx.ptm('handle')), null, 16, _hoisted_1)) : createCommentVNode("", true), _ctx.range ? (openBlock(), createElementBlock("span", mergeProps({
     key: 1,
     "class": _ctx.cx('handle'),
-    style: [_ctx.sx('handle'), $options.rangeStartHandleStyle],
-    onTouchstartPassive: _cache[5] || (_cache[5] = function ($event) {
+    style: [_ctx.sx('handle'), $options.rangeStartHandleStyle()],
+    onTouchstartPassive: _cache[6] || (_cache[6] = function ($event) {
       return $options.onDragStart($event, 0);
     }),
-    onTouchmovePassive: _cache[6] || (_cache[6] = function ($event) {
+    onTouchmovePassive: _cache[7] || (_cache[7] = function ($event) {
       return $options.onDrag($event);
     }),
-    onTouchend: _cache[7] || (_cache[7] = function ($event) {
+    onTouchend: _cache[8] || (_cache[8] = function ($event) {
       return $options.onDragEnd($event);
     }),
-    onMousedown: _cache[8] || (_cache[8] = function ($event) {
+    onMousedown: _cache[9] || (_cache[9] = function ($event) {
       return $options.onMouseDown($event, 0);
     }),
-    onKeydown: _cache[9] || (_cache[9] = function ($event) {
+    onKeydown: _cache[10] || (_cache[10] = function ($event) {
       return $options.onKeyDown($event, 0);
     }),
+    onBlur: _cache[11] || (_cache[11] = function ($event) {
+      return $options.onBlur($event, 0);
+    }),
     tabindex: _ctx.tabindex,
     role: "slider",
     "aria-valuemin": _ctx.min,
-    "aria-valuenow": _ctx.modelValue ? _ctx.modelValue[0] : null,
+    "aria-valuenow": _ctx.d_value ? _ctx.d_value[0] : null,
     "aria-valuemax": _ctx.max,
     "aria-labelledby": _ctx.ariaLabelledby,
     "aria-label": _ctx.ariaLabel,
@@ -374,26 +444,29 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
   }, _ctx.ptm('startHandler')), null, 16, _hoisted_2)) : createCommentVNode("", true), _ctx.range ? (openBlock(), createElementBlock("span", mergeProps({
     key: 2,
     "class": _ctx.cx('handle'),
-    style: [_ctx.sx('handle'), $options.rangeEndHandleStyle],
-    onTouchstartPassive: _cache[10] || (_cache[10] = function ($event) {
+    style: [_ctx.sx('handle'), $options.rangeEndHandleStyle()],
+    onTouchstartPassive: _cache[12] || (_cache[12] = function ($event) {
       return $options.onDragStart($event, 1);
     }),
-    onTouchmovePassive: _cache[11] || (_cache[11] = function ($event) {
+    onTouchmovePassive: _cache[13] || (_cache[13] = function ($event) {
       return $options.onDrag($event);
     }),
-    onTouchend: _cache[12] || (_cache[12] = function ($event) {
+    onTouchend: _cache[14] || (_cache[14] = function ($event) {
       return $options.onDragEnd($event);
     }),
-    onMousedown: _cache[13] || (_cache[13] = function ($event) {
+    onMousedown: _cache[15] || (_cache[15] = function ($event) {
       return $options.onMouseDown($event, 1);
     }),
-    onKeydown: _cache[14] || (_cache[14] = function ($event) {
+    onKeydown: _cache[16] || (_cache[16] = function ($event) {
       return $options.onKeyDown($event, 1);
     }),
+    onBlur: _cache[17] || (_cache[17] = function ($event) {
+      return $options.onBlur($event, 1);
+    }),
     tabindex: _ctx.tabindex,
     role: "slider",
     "aria-valuemin": _ctx.min,
-    "aria-valuenow": _ctx.modelValue ? _ctx.modelValue[1] : null,
+    "aria-valuenow": _ctx.d_value ? _ctx.d_value[1] : null,
     "aria-valuemax": _ctx.max,
     "aria-labelledby": _ctx.ariaLabelledby,
     "aria-label": _ctx.ariaLabel,