primevue 3.18.0 → 3.19.0

package/sidebar/sidebar.js

@@ -1,11 +1,12 @@
 this.primevue = this.primevue || {};
-this.primevue.sidebar = (function (utils, Ripple, Portal, vue) {
+this.primevue.sidebar = (function (FocusTrap, Portal, Ripple, utils, vue) {
     'use strict';
 
     function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-    var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
+    var FocusTrap__default = /*#__PURE__*/_interopDefaultLegacy(FocusTrap);
     var Portal__default = /*#__PURE__*/_interopDefaultLegacy(Portal);
+    var Ripple__default = /*#__PURE__*/_interopDefaultLegacy(Ripple);
 
     var script = {
         name: 'Sidebar',
@@ -36,18 +37,21 @@ this.primevue.sidebar = (function (utils, Ripple, Portal, vue) {
                 type: Boolean,
                 default: true
             },
+            closeIcon: {
+                type: String,
+                default: 'pi pi-times'
+            },
             modal: {
                 type: Boolean,
                 default: true
-            },
-            ariaCloseLabel: {
-                type: String,
-                default: 'close'
             }
         },
         mask: null,
         maskClickListener: null,
         container: null,
+        content: null,
+        headerContainer: null,
+        closeButton: null,
         beforeUnmount() {
             this.destroyModal();
 
@@ -87,11 +91,21 @@ this.primevue.sidebar = (function (utils, Ripple, Portal, vue) {
                 }
             },
             focus() {
-                let focusable = utils.DomHandler.findSingle(this.container, 'input,button');
+                const findFocusableElement = (container) => {
+                    return container.querySelector('[autofocus]');
+                };
+
+                let focusTarget = this.$slots.default && findFocusableElement(this.content);
+
+                if (!focusTarget) {
+                    focusTarget = this.$slots.header && findFocusableElement(this.headerContainer);
 
-                if (focusable) {
-                    focusable.focus();
+                    if (!focusTarget) {
+                        focusTarget = findFocusableElement(this.container);
+                    }
                 }
+
+                focusTarget && focusTarget.focus();
             },
             enableModality() {
                 if (!this.mask) {
@@ -124,6 +138,11 @@ this.primevue.sidebar = (function (utils, Ripple, Portal, vue) {
                     this.mask.addEventListener('click', this.maskClickListener);
                 }
             },
+            onKeydown(event) {
+                if (event.code === 'Escape') {
+                    this.hide();
+                }
+            },
             unbindMaskClickListener() {
                 if (this.maskClickListener) {
                     this.mask.removeEventListener('click', this.maskClickListener);
@@ -140,6 +159,15 @@ this.primevue.sidebar = (function (utils, Ripple, Portal, vue) {
             },
             containerRef(el) {
                 this.container = el;
+            },
+            contentRef(el) {
+                this.content = el;
+            },
+            headerContainerRef(el) {
+                this.headerContainer = el;
+            },
+            closeButtonRef(el) {
+                this.closeButton = el;
             }
         },
         computed: {
@@ -155,9 +183,13 @@ this.primevue.sidebar = (function (utils, Ripple, Portal, vue) {
             },
             fullScreen() {
                 return this.position === 'full';
+            },
+            closeAriaLabel() {
+                return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.close : undefined;
             }
         },
         directives: {
+            focustrap: FocusTrap__default["default"],
             ripple: Ripple__default["default"]
         },
         components: {
@@ -166,21 +198,16 @@ this.primevue.sidebar = (function (utils, Ripple, Portal, vue) {
     };
 
     const _hoisted_1 = ["aria-modal"];
-    const _hoisted_2 = { class: "p-sidebar-header" };
-    const _hoisted_3 = {
+    const _hoisted_2 = {
       key: 0,
       class: "p-sidebar-header-content"
     };
-    const _hoisted_4 = ["aria-label"];
-    const _hoisted_5 = /*#__PURE__*/vue.createElementVNode("span", { class: "p-sidebar-close-icon pi pi-times" }, null, -1);
-    const _hoisted_6 = [
-      _hoisted_5
-    ];
-    const _hoisted_7 = { class: "p-sidebar-content" };
+    const _hoisted_3 = ["aria-label"];
 
     function render(_ctx, _cache, $props, $setup, $data, $options) {
       const _component_Portal = vue.resolveComponent("Portal");
       const _directive_ripple = vue.resolveDirective("ripple");
+      const _directive_focustrap = vue.resolveDirective("focustrap");
 
       return (vue.openBlock(), vue.createBlock(_component_Portal, null, {
         default: vue.withCtx(() => [
@@ -193,35 +220,50 @@ this.primevue.sidebar = (function (utils, Ripple, Portal, vue) {
           }, {
             default: vue.withCtx(() => [
               ($props.visible)
-                ? (vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
+                ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", vue.mergeProps({
                     key: 0,
                     ref: $options.containerRef,
                     class: $options.containerClass,
                     role: "complementary",
-                    "aria-modal": $props.modal
+                    "aria-modal": $props.modal,
+                    onKeydown: _cache[1] || (_cache[1] = (...args) => ($options.onKeydown && $options.onKeydown(...args)))
                   }, _ctx.$attrs), [
-                    vue.createElementVNode("div", _hoisted_2, [
+                    vue.createElementVNode("div", {
+                      ref: $options.headerContainerRef,
+                      class: "p-sidebar-header"
+                    }, [
                       (_ctx.$slots.header)
-                        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
+                        ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
                             vue.renderSlot(_ctx.$slots, "header")
                           ]))
                         : vue.createCommentVNode("", true),
                       ($props.showCloseIcon)
                         ? vue.withDirectives((vue.openBlock(), vue.createElementBlock("button", {
                             key: 1,
+                            ref: $options.closeButtonRef,
+                            autofocus: "",
+                            type: "button",
                             class: "p-sidebar-close p-sidebar-icon p-link",
-                            onClick: _cache[0] || (_cache[0] = (...args) => ($options.hide && $options.hide(...args))),
-                            "aria-label": $props.ariaCloseLabel,
-                            type: "button"
-                          }, _hoisted_6, 8, _hoisted_4)), [
+                            "aria-label": $options.closeAriaLabel,
+                            onClick: _cache[0] || (_cache[0] = (...args) => ($options.hide && $options.hide(...args)))
+                          }, [
+                            vue.createElementVNode("span", {
+                              class: vue.normalizeClass(['p-sidebar-close-icon', $props.closeIcon])
+                            }, null, 2)
+                          ], 8, _hoisted_3)), [
                             [_directive_ripple]
                           ])
                         : vue.createCommentVNode("", true)
-                    ]),
-                    vue.createElementVNode("div", _hoisted_7, [
+                    ], 512),
+                    vue.createElementVNode("div", {
+                      ref: $options.contentRef,
+                      class: "p-sidebar-content"
+                    }, [
                       vue.renderSlot(_ctx.$slots, "default")
-                    ])
-                  ], 16, _hoisted_1))
+                    ], 512)
+                  ], 16, _hoisted_1)), [
+                    [_directive_focustrap]
+                  ])
                 : vue.createCommentVNode("", true)
             ]),
             _: 3
@@ -265,4 +307,4 @@ this.primevue.sidebar = (function (utils, Ripple, Portal, vue) {
 
     return script;
 
-})(primevue.utils, primevue.ripple, primevue.portal, Vue);
+})(primevue.focustrap, primevue.portal, primevue.ripple, primevue.utils, Vue);

package/sidebar/sidebar.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.sidebar=function(e,t,n,i){"use strict";function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=s(t),r=s(n),o={name:"Sidebar",inheritAttrs:!1,emits:["update:visible","show","hide"],props:{visible:{type:Boolean,default:!1},position:{type:String,default:"left"},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},dismissable:{type:Boolean,default:!0},showCloseIcon:{type:Boolean,default:!0},modal:{type:Boolean,default:!0},ariaCloseLabel:{type:String,default:"close"}},mask:null,maskClickListener:null,container:null,beforeUnmount(){this.destroyModal(),this.container&&this.autoZIndex&&e.ZIndexUtils.clear(this.container),this.container=null},methods:{hide(){this.$emit("update:visible",!1)},onEnter(t){this.$emit("show"),this.autoZIndex&&e.ZIndexUtils.set("modal",t,this.baseZIndex||this.$primevue.config.zIndex.modal),this.focus(),this.modal&&!this.fullScreen&&this.enableModality()},onLeave(){this.$emit("hide"),this.modal&&!this.fullScreen&&this.disableModality()},onAfterLeave(t){this.autoZIndex&&e.ZIndexUtils.clear(t)},focus(){let t=e.DomHandler.findSingle(this.container,"input,button");t&&t.focus()},enableModality(){this.mask||(this.mask=document.createElement("div"),this.mask.setAttribute("class","p-sidebar-mask p-component-overlay p-component-overlay-enter"),this.mask.style.zIndex=String(parseInt(this.container.style.zIndex,10)-1),this.dismissable&&this.bindMaskClickListener(),document.body.appendChild(this.mask),e.DomHandler.addClass(document.body,"p-overflow-hidden"))},disableModality(){this.mask&&(e.DomHandler.addClass(this.mask,"p-component-overlay-leave"),this.mask.addEventListener("animationend",(()=>{this.destroyModal()})))},bindMaskClickListener(){this.maskClickListener||(this.maskClickListener=()=>{this.hide()},this.mask.addEventListener("click",this.maskClickListener))},unbindMaskClickListener(){this.maskClickListener&&(this.mask.removeEventListener("click",this.maskClickListener),this.maskClickListener=null)},destroyModal(){this.mask&&(this.unbindMaskClickListener(),document.body.removeChild(this.mask),e.DomHandler.removeClass(document.body,"p-overflow-hidden"),this.mask=null)},containerRef(e){this.container=e}},computed:{containerClass(){return["p-sidebar p-component p-sidebar-"+this.position,{"p-sidebar-active":this.visible,"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},fullScreen(){return"full"===this.position}},directives:{ripple:a.default},components:{Portal:r.default}};const l=["aria-modal"],d={class:"p-sidebar-header"},p={key:0,class:"p-sidebar-header-content"},m=["aria-label"],b=[i.createElementVNode("span",{class:"p-sidebar-close-icon pi pi-times"},null,-1)],c={class:"p-sidebar-content"};return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===n&&i.firstChild?i.insertBefore(s,i.firstChild):i.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n.p-sidebar {\n    position: fixed;\n    -webkit-transition: -webkit-transform 0.3s;\n    transition: -webkit-transform 0.3s;\n    transition: transform 0.3s;\n    transition: transform 0.3s, -webkit-transform 0.3s;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n.p-sidebar-content {\n    position: relative;\n    overflow-y: auto;\n}\n.p-sidebar-header {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n}\n.p-sidebar-icon {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    position: relative;\n    overflow: hidden;\n}\n.p-sidebar-left {\n    top: 0;\n    left: 0;\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-right {\n    top: 0;\n    right: 0;\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-top {\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 10rem;\n}\n.p-sidebar-bottom {\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 10rem;\n}\n.p-sidebar-full {\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    -webkit-transition: none;\n    transition: none;\n}\n.p-sidebar-left.p-sidebar-enter-from,\n.p-sidebar-left.p-sidebar-leave-to {\n    -webkit-transform: translateX(-100%);\n            transform: translateX(-100%);\n}\n.p-sidebar-right.p-sidebar-enter-from,\n.p-sidebar-right.p-sidebar-leave-to {\n    -webkit-transform: translateX(100%);\n            transform: translateX(100%);\n}\n.p-sidebar-top.p-sidebar-enter-from,\n.p-sidebar-top.p-sidebar-leave-to {\n    -webkit-transform: translateY(-100%);\n            transform: translateY(-100%);\n}\n.p-sidebar-bottom.p-sidebar-enter-from,\n.p-sidebar-bottom.p-sidebar-leave-to {\n    -webkit-transform: translateY(100%);\n            transform: translateY(100%);\n}\n.p-sidebar-full.p-sidebar-enter-from,\n.p-sidebar-full.p-sidebar-leave-to {\n    opacity: 0;\n}\n.p-sidebar-full.p-sidebar-enter-active,\n.p-sidebar-full.p-sidebar-leave-active {\n    -webkit-transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n.p-sidebar-left.p-sidebar-sm,\n.p-sidebar-right.p-sidebar-sm {\n    width: 20rem;\n}\n.p-sidebar-left.p-sidebar-md,\n.p-sidebar-right.p-sidebar-md {\n    width: 40rem;\n}\n.p-sidebar-left.p-sidebar-lg,\n.p-sidebar-right.p-sidebar-lg {\n    width: 60rem;\n}\n.p-sidebar-top.p-sidebar-sm,\n.p-sidebar-bottom.p-sidebar-sm {\n    height: 10rem;\n}\n.p-sidebar-top.p-sidebar-md,\n.p-sidebar-bottom.p-sidebar-md {\n    height: 20rem;\n}\n.p-sidebar-top.p-sidebar-lg,\n.p-sidebar-bottom.p-sidebar-lg {\n    height: 30rem;\n}\n@media screen and (max-width: 64em) {\n.p-sidebar-left.p-sidebar-lg,\n    .p-sidebar-left.p-sidebar-md,\n    .p-sidebar-right.p-sidebar-lg,\n    .p-sidebar-right.p-sidebar-md {\n        width: 20rem;\n}\n}\n"),o.render=function(e,t,n,s,a,r){const o=i.resolveComponent("Portal"),h=i.resolveDirective("ripple");return i.openBlock(),i.createBlock(o,null,{default:i.withCtx((()=>[i.createVNode(i.Transition,{name:"p-sidebar",onEnter:r.onEnter,onLeave:r.onLeave,onAfterLeave:r.onAfterLeave,appear:""},{default:i.withCtx((()=>[n.visible?(i.openBlock(),i.createElementBlock("div",i.mergeProps({key:0,ref:r.containerRef,class:r.containerClass,role:"complementary","aria-modal":n.modal},e.$attrs),[i.createElementVNode("div",d,[e.$slots.header?(i.openBlock(),i.createElementBlock("div",p,[i.renderSlot(e.$slots,"header")])):i.createCommentVNode("",!0),n.showCloseIcon?i.withDirectives((i.openBlock(),i.createElementBlock("button",{key:1,class:"p-sidebar-close p-sidebar-icon p-link",onClick:t[0]||(t[0]=(...e)=>r.hide&&r.hide(...e)),"aria-label":n.ariaCloseLabel,type:"button"},b,8,m)),[[h]]):i.createCommentVNode("",!0)]),i.createElementVNode("div",c,[i.renderSlot(e.$slots,"default")])],16,l)):i.createCommentVNode("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3})},o}(primevue.utils,primevue.ripple,primevue.portal,Vue);
+this.primevue=this.primevue||{},this.primevue.sidebar=function(e,t,n,i,s){"use strict";function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var r=a(e),o=a(t),l=a(n),d={name:"Sidebar",inheritAttrs:!1,emits:["update:visible","show","hide"],props:{visible:{type:Boolean,default:!1},position:{type:String,default:"left"},baseZIndex:{type:Number,default:0},autoZIndex:{type:Boolean,default:!0},dismissable:{type:Boolean,default:!0},showCloseIcon:{type:Boolean,default:!0},closeIcon:{type:String,default:"pi pi-times"},modal:{type:Boolean,default:!0}},mask:null,maskClickListener:null,container:null,content:null,headerContainer:null,closeButton:null,beforeUnmount(){this.destroyModal(),this.container&&this.autoZIndex&&i.ZIndexUtils.clear(this.container),this.container=null},methods:{hide(){this.$emit("update:visible",!1)},onEnter(e){this.$emit("show"),this.autoZIndex&&i.ZIndexUtils.set("modal",e,this.baseZIndex||this.$primevue.config.zIndex.modal),this.focus(),this.modal&&!this.fullScreen&&this.enableModality()},onLeave(){this.$emit("hide"),this.modal&&!this.fullScreen&&this.disableModality()},onAfterLeave(e){this.autoZIndex&&i.ZIndexUtils.clear(e)},focus(){const e=e=>e.querySelector("[autofocus]");let t=this.$slots.default&&e(this.content);t||(t=this.$slots.header&&e(this.headerContainer),t||(t=e(this.container))),t&&t.focus()},enableModality(){this.mask||(this.mask=document.createElement("div"),this.mask.setAttribute("class","p-sidebar-mask p-component-overlay p-component-overlay-enter"),this.mask.style.zIndex=String(parseInt(this.container.style.zIndex,10)-1),this.dismissable&&this.bindMaskClickListener(),document.body.appendChild(this.mask),i.DomHandler.addClass(document.body,"p-overflow-hidden"))},disableModality(){this.mask&&(i.DomHandler.addClass(this.mask,"p-component-overlay-leave"),this.mask.addEventListener("animationend",(()=>{this.destroyModal()})))},bindMaskClickListener(){this.maskClickListener||(this.maskClickListener=()=>{this.hide()},this.mask.addEventListener("click",this.maskClickListener))},onKeydown(e){"Escape"===e.code&&this.hide()},unbindMaskClickListener(){this.maskClickListener&&(this.mask.removeEventListener("click",this.maskClickListener),this.maskClickListener=null)},destroyModal(){this.mask&&(this.unbindMaskClickListener(),document.body.removeChild(this.mask),i.DomHandler.removeClass(document.body,"p-overflow-hidden"),this.mask=null)},containerRef(e){this.container=e},contentRef(e){this.content=e},headerContainerRef(e){this.headerContainer=e},closeButtonRef(e){this.closeButton=e}},computed:{containerClass(){return["p-sidebar p-component p-sidebar-"+this.position,{"p-sidebar-active":this.visible,"p-input-filled":"filled"===this.$primevue.config.inputStyle,"p-ripple-disabled":!1===this.$primevue.config.ripple}]},fullScreen(){return"full"===this.position},closeAriaLabel(){return this.$primevue.config.locale.aria?this.$primevue.config.locale.aria.close:void 0}},directives:{focustrap:r.default,ripple:l.default},components:{Portal:o.default}};const p=["aria-modal"],c={key:0,class:"p-sidebar-header-content"},m=["aria-label"];return function(e,t){void 0===t&&(t={});var n=t.insertAt;if(e&&"undefined"!=typeof document){var i=document.head||document.getElementsByTagName("head")[0],s=document.createElement("style");s.type="text/css","top"===n&&i.firstChild?i.insertBefore(s,i.firstChild):i.appendChild(s),s.styleSheet?s.styleSheet.cssText=e:s.appendChild(document.createTextNode(e))}}("\n.p-sidebar {\n    position: fixed;\n    -webkit-transition: -webkit-transform 0.3s;\n    transition: -webkit-transform 0.3s;\n    transition: transform 0.3s;\n    transition: transform 0.3s, -webkit-transform 0.3s;\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-orient: vertical;\n    -webkit-box-direction: normal;\n        -ms-flex-direction: column;\n            flex-direction: column;\n}\n.p-sidebar-content {\n    position: relative;\n    overflow-y: auto;\n}\n.p-sidebar-header {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: end;\n        -ms-flex-pack: end;\n            justify-content: flex-end;\n}\n.p-sidebar-icon {\n    display: -webkit-box;\n    display: -ms-flexbox;\n    display: flex;\n    -webkit-box-align: center;\n        -ms-flex-align: center;\n            align-items: center;\n    -webkit-box-pack: center;\n        -ms-flex-pack: center;\n            justify-content: center;\n    position: relative;\n    overflow: hidden;\n}\n.p-sidebar-left {\n    top: 0;\n    left: 0;\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-right {\n    top: 0;\n    right: 0;\n    width: 20rem;\n    height: 100%;\n}\n.p-sidebar-top {\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 10rem;\n}\n.p-sidebar-bottom {\n    bottom: 0;\n    left: 0;\n    width: 100%;\n    height: 10rem;\n}\n.p-sidebar-full {\n    width: 100%;\n    height: 100%;\n    top: 0;\n    left: 0;\n    -webkit-transition: none;\n    transition: none;\n}\n.p-sidebar-left.p-sidebar-enter-from,\n.p-sidebar-left.p-sidebar-leave-to {\n    -webkit-transform: translateX(-100%);\n            transform: translateX(-100%);\n}\n.p-sidebar-right.p-sidebar-enter-from,\n.p-sidebar-right.p-sidebar-leave-to {\n    -webkit-transform: translateX(100%);\n            transform: translateX(100%);\n}\n.p-sidebar-top.p-sidebar-enter-from,\n.p-sidebar-top.p-sidebar-leave-to {\n    -webkit-transform: translateY(-100%);\n            transform: translateY(-100%);\n}\n.p-sidebar-bottom.p-sidebar-enter-from,\n.p-sidebar-bottom.p-sidebar-leave-to {\n    -webkit-transform: translateY(100%);\n            transform: translateY(100%);\n}\n.p-sidebar-full.p-sidebar-enter-from,\n.p-sidebar-full.p-sidebar-leave-to {\n    opacity: 0;\n}\n.p-sidebar-full.p-sidebar-enter-active,\n.p-sidebar-full.p-sidebar-leave-active {\n    -webkit-transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n    transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);\n}\n.p-sidebar-left.p-sidebar-sm,\n.p-sidebar-right.p-sidebar-sm {\n    width: 20rem;\n}\n.p-sidebar-left.p-sidebar-md,\n.p-sidebar-right.p-sidebar-md {\n    width: 40rem;\n}\n.p-sidebar-left.p-sidebar-lg,\n.p-sidebar-right.p-sidebar-lg {\n    width: 60rem;\n}\n.p-sidebar-top.p-sidebar-sm,\n.p-sidebar-bottom.p-sidebar-sm {\n    height: 10rem;\n}\n.p-sidebar-top.p-sidebar-md,\n.p-sidebar-bottom.p-sidebar-md {\n    height: 20rem;\n}\n.p-sidebar-top.p-sidebar-lg,\n.p-sidebar-bottom.p-sidebar-lg {\n    height: 30rem;\n}\n@media screen and (max-width: 64em) {\n.p-sidebar-left.p-sidebar-lg,\n    .p-sidebar-left.p-sidebar-md,\n    .p-sidebar-right.p-sidebar-lg,\n    .p-sidebar-right.p-sidebar-md {\n        width: 20rem;\n}\n}\n"),d.render=function(e,t,n,i,a,r){const o=s.resolveComponent("Portal"),l=s.resolveDirective("ripple"),d=s.resolveDirective("focustrap");return s.openBlock(),s.createBlock(o,null,{default:s.withCtx((()=>[s.createVNode(s.Transition,{name:"p-sidebar",onEnter:r.onEnter,onLeave:r.onLeave,onAfterLeave:r.onAfterLeave,appear:""},{default:s.withCtx((()=>[n.visible?s.withDirectives((s.openBlock(),s.createElementBlock("div",s.mergeProps({key:0,ref:r.containerRef,class:r.containerClass,role:"complementary","aria-modal":n.modal,onKeydown:t[1]||(t[1]=(...e)=>r.onKeydown&&r.onKeydown(...e))},e.$attrs),[s.createElementVNode("div",{ref:r.headerContainerRef,class:"p-sidebar-header"},[e.$slots.header?(s.openBlock(),s.createElementBlock("div",c,[s.renderSlot(e.$slots,"header")])):s.createCommentVNode("",!0),n.showCloseIcon?s.withDirectives((s.openBlock(),s.createElementBlock("button",{key:1,ref:r.closeButtonRef,autofocus:"",type:"button",class:"p-sidebar-close p-sidebar-icon p-link","aria-label":r.closeAriaLabel,onClick:t[0]||(t[0]=(...e)=>r.hide&&r.hide(...e))},[s.createElementVNode("span",{class:s.normalizeClass(["p-sidebar-close-icon",n.closeIcon])},null,2)],8,m)),[[l]]):s.createCommentVNode("",!0)],512),s.createElementVNode("div",{ref:r.contentRef,class:"p-sidebar-content"},[s.renderSlot(e.$slots,"default")],512)],16,p)),[[d]]):s.createCommentVNode("",!0)])),_:3},8,["onEnter","onLeave","onAfterLeave"])])),_:3})},d}(primevue.focustrap,primevue.portal,primevue.ripple,primevue.utils,Vue);

package/slider/Slider.vue

@@ -152,21 +152,27 @@ export default {
                 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 >= maxValue) newValue = maxValue;
+                    else if (newValue >= this.max) newValue = this.max;
 
-                    modelValue[0] = newValue;
-                    modelValue[1] = modelValue[1] || this.max;
-                } else {
-                    let minValue = this.modelValue ? this.modelValue[0] : this.min;
+                    if (newValue > modelValue[1]) {
+                        modelValue[1] = newValue;
 
+                        this.handleIndex = 1;
+                    } else {
+                        modelValue[0] = newValue;
+                    }
+                } else {
                     if (newValue > this.max) newValue = this.max;
-                    else if (newValue <= minValue) newValue = minValue;
+                    else if (newValue <= this.min) newValue = this.min;
 
-                    modelValue[0] = modelValue[0] || this.min;
-                    modelValue[1] = newValue;
+                    if (newValue < modelValue[0]) {
+                        modelValue[0] = newValue;
+
+                        this.handleIndex = 0;
+                    } else {
+                        modelValue[1] = newValue;
+                    }
                 }
             } else {
                 if (newValue < this.min) newValue = this.min;
@@ -334,8 +340,11 @@ export default {
         },
         rangeStyle() {
             if (this.range) {
-                if (this.horizontal) return { left: this.rangeStartPosition + '%', width: this.rangeEndPosition - this.rangeStartPosition + '%' };
-                else return { bottom: this.rangeStartPosition + '%', height: this.rangeEndPosition - this.rangeStartHandlePosition + '%' };
+                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 + '%' };

package/slider/slider.cjs.js

@@ -94,21 +94,27 @@ var script = {
                 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 >= maxValue) newValue = maxValue;
+                    else if (newValue >= this.max) newValue = this.max;
 
-                    modelValue[0] = newValue;
-                    modelValue[1] = modelValue[1] || this.max;
-                } else {
-                    let minValue = this.modelValue ? this.modelValue[0] : this.min;
+                    if (newValue > modelValue[1]) {
+                        modelValue[1] = newValue;
 
+                        this.handleIndex = 1;
+                    } else {
+                        modelValue[0] = newValue;
+                    }
+                } else {
                     if (newValue > this.max) newValue = this.max;
-                    else if (newValue <= minValue) newValue = minValue;
+                    else if (newValue <= this.min) newValue = this.min;
 
-                    modelValue[0] = modelValue[0] || this.min;
-                    modelValue[1] = newValue;
+                    if (newValue < modelValue[0]) {
+                        modelValue[0] = newValue;
+
+                        this.handleIndex = 0;
+                    } else {
+                        modelValue[1] = newValue;
+                    }
                 }
             } else {
                 if (newValue < this.min) newValue = this.min;
@@ -273,8 +279,11 @@ var script = {
         },
         rangeStyle() {
             if (this.range) {
-                if (this.horizontal) return { left: this.rangeStartPosition + '%', width: this.rangeEndPosition - this.rangeStartPosition + '%' };
-                else return { bottom: this.rangeStartPosition + '%', height: this.rangeEndPosition - this.rangeStartHandlePosition + '%' };
+                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 + '%' };

package/slider/slider.cjs.min.js

@@ -1 +1 @@
-"use strict";var e=require("primevue/utils"),t=require("vue"),i={name:"Slider",emits:["update:modelValue","change","slideend"],props:{modelValue:[Number,Array],min:{type:Number,default:0},max:{type:Number,default:100},orientation:{type:String,default:"horizontal"},step:{type:Number,default:null},range:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},tabindex:{type:Number,default:0},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},dragging:!1,handleIndex:null,initX:null,initY:null,barWidth:null,barHeight:null,dragListener:null,dragEndListener:null,beforeUnmount(){this.unbindDragListeners()},methods:{updateDomData(){let t=this.$el.getBoundingClientRect();this.initX=t.left+e.DomHandler.getWindowScrollLeft(),this.initY=t.top+e.DomHandler.getWindowScrollTop(),this.barWidth=this.$el.offsetWidth,this.barHeight=this.$el.offsetHeight},setValue(e){let t,i=e.touches?e.touches[0].pageX:e.pageX,a=e.touches?e.touches[0].pageY:e.pageY;t="horizontal"===this.orientation?100*(i-this.initX)/this.barWidth:100*(this.initY+this.barHeight-a)/this.barHeight;let n=(this.max-this.min)*(t/100)+this.min;if(this.step){const e=this.range?this.modelValue[this.handleIndex]:this.modelValue,t=n-e;t<0?n=e+Math.ceil(n/this.step-e/this.step)*this.step:t>0&&(n=e+Math.floor(n/this.step-e/this.step)*this.step)}else n=Math.floor(n);this.updateModel(e,n)},updateModel(e,t){let i,a=parseFloat(t.toFixed(10));if(this.range)if(i=this.modelValue?[...this.modelValue]:[],0==this.handleIndex){let e=this.modelValue?this.modelValue[1]:this.max;a<this.min?a=this.min:a>=e&&(a=e),i[0]=a,i[1]=i[1]||this.max}else{let e=this.modelValue?this.modelValue[0]:this.min;a>this.max?a=this.max:a<=e&&(a=e),i[0]=i[0]||this.min,i[1]=a}else a<this.min?a=this.min:a>this.max&&(a=this.max),i=a;this.$emit("update:modelValue",i),this.$emit("change",i)},onDragStart(t,i){this.disabled||(e.DomHandler.addClass(this.$el,"p-slider-sliding"),this.dragging=!0,this.updateDomData(),this.range&&this.modelValue[0]===this.max?this.handleIndex=0:this.handleIndex=i,t.preventDefault())},onDrag(e){this.dragging&&(this.setValue(e),e.preventDefault())},onDragEnd(t){this.dragging&&(this.dragging=!1,e.DomHandler.removeClass(this.$el,"p-slider-sliding"),this.$emit("slideend",{originalEvent:t,value:this.modelValue}))},onBarClick(t){this.disabled||e.DomHandler.hasClass(t.target,"p-slider-handle")||(this.updateDomData(),this.setValue(t))},onMouseDown(e,t){this.bindDragListeners(),this.onDragStart(e,t)},onKeyDown(e,t){switch(this.handleIndex=t,e.code){case"ArrowDown":case"ArrowLeft":this.decrementValue(e,t),e.preventDefault();break;case"ArrowUp":case"ArrowRight":this.incrementValue(e,t),e.preventDefault();break;case"PageDown":this.decrementValue(e,t,!0),e.preventDefault();break;case"PageUp":this.incrementValue(e,t,!0),e.preventDefault();break;case"Home":this.updateModel(e,this.min),e.preventDefault();break;case"End":this.updateModel(e,this.max),e.preventDefault()}},decrementValue(e,t,i=!1){let a;a=this.range?this.step?this.modelValue[t]-this.step:this.modelValue[t]-1:this.step?this.modelValue-this.step:!this.step&&i?this.modelValue-10:this.modelValue-1,this.updateModel(e,a),e.preventDefault()},incrementValue(e,t,i=!1){let a;a=this.range?this.step?this.modelValue[t]+this.step:this.modelValue[t]+1:this.step?this.modelValue+this.step:!this.step&&i?this.modelValue+10:this.modelValue+1,this.updateModel(e,a),e.preventDefault()},bindDragListeners(){this.dragListener||(this.dragListener=this.onDrag.bind(this),document.addEventListener("mousemove",this.dragListener)),this.dragEndListener||(this.dragEndListener=this.onDragEnd.bind(this),document.addEventListener("mouseup",this.dragEndListener))},unbindDragListeners(){this.dragListener&&(document.removeEventListener("mousemove",this.dragListener),this.dragListener=null),this.dragEndListener&&(document.removeEventListener("mouseup",this.dragEndListener),this.dragEndListener=null)}},computed:{containerClass(){return["p-slider p-component",{"p-disabled":this.disabled,"p-slider-horizontal":"horizontal"===this.orientation,"p-slider-vertical":"vertical"===this.orientation}]},horizontal(){return"horizontal"===this.orientation},vertical(){return"vertical"===this.orientation},rangeStyle(){return this.range?this.horizontal?{left:this.rangeStartPosition+"%",width:this.rangeEndPosition-this.rangeStartPosition+"%"}:{bottom:this.rangeStartPosition+"%",height:this.rangeEndPosition-this.rangeStartHandlePosition+"%"}:this.horizontal?{width:this.handlePosition+"%"}:{height:this.handlePosition+"%"}},handleStyle(){return this.horizontal?{left:this.handlePosition+"%"}:{bottom:this.handlePosition+"%"}},handlePosition(){return this.modelValue<this.min?0:this.modelValue>this.max?100:100*(this.modelValue-this.min)/(this.max-this.min)},rangeStartPosition(){return this.modelValue&&this.modelValue[0]?100*(this.modelValue[0]<this.min?0:this.modelValue[0]-this.min)/(this.max-this.min):0},rangeEndPosition(){return this.modelValue&&2===this.modelValue.length?100*(this.modelValue[1]>this.max?100:this.modelValue[1]-this.min)/(this.max-this.min):100},rangeStartHandleStyle(){return this.horizontal?{left:this.rangeStartPosition+"%"}:{bottom:this.rangeStartPosition+"%"}},rangeEndHandleStyle(){return this.horizontal?{left:this.rangeEndPosition+"%"}:{bottom:this.rangeEndPosition+"%"}}}};const a=["tabindex","aria-valuemin","aria-valuenow","aria-valuemax","aria-labelledby","aria-label","aria-orientation"],n=["tabindex","aria-valuemin","aria-valuenow","aria-valuemax","aria-labelledby","aria-label","aria-orientation"],l=["tabindex","aria-valuemin","aria-valuenow","aria-valuemax","aria-labelledby","aria-label","aria-orientation"];!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===i&&a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-slider {\n    position: relative;\n}\n.p-slider .p-slider-handle {\n    position: absolute;\n    cursor: -webkit-grab;\n    cursor: grab;\n    -ms-touch-action: none;\n        touch-action: none;\n    display: block;\n}\n.p-slider-range {\n    position: absolute;\n    display: block;\n}\n.p-slider-horizontal .p-slider-range {\n    top: 0;\n    left: 0;\n    height: 100%;\n}\n.p-slider-horizontal .p-slider-handle {\n    top: 50%;\n}\n.p-slider-vertical {\n    height: 100px;\n}\n.p-slider-vertical .p-slider-handle {\n    left: 50%;\n}\n.p-slider-vertical .p-slider-range {\n    bottom: 0;\n    left: 0;\n    width: 100%;\n}\n"),i.render=function(e,i,s,o,r,d){return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(d.containerClass),onClick:i[15]||(i[15]=(...e)=>d.onBarClick&&d.onBarClick(...e))},[t.createElementVNode("span",{class:"p-slider-range",style:t.normalizeStyle(d.rangeStyle)},null,4),s.range?t.createCommentVNode("",!0):(t.openBlock(),t.createElementBlock("span",{key:0,class:"p-slider-handle",style:t.normalizeStyle(d.handleStyle),onTouchstart:i[0]||(i[0]=e=>d.onDragStart(e)),onTouchmove:i[1]||(i[1]=e=>d.onDrag(e)),onTouchend:i[2]||(i[2]=e=>d.onDragEnd(e)),onMousedown:i[3]||(i[3]=e=>d.onMouseDown(e)),onKeydown:i[4]||(i[4]=e=>d.onKeyDown(e)),tabindex:s.tabindex,role:"slider","aria-valuemin":s.min,"aria-valuenow":s.modelValue,"aria-valuemax":s.max,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-orientation":s.orientation},null,44,a)),s.range?(t.openBlock(),t.createElementBlock("span",{key:1,class:"p-slider-handle",style:t.normalizeStyle(d.rangeStartHandleStyle),onTouchstart:i[5]||(i[5]=e=>d.onDragStart(e,0)),onTouchmove:i[6]||(i[6]=e=>d.onDrag(e)),onTouchend:i[7]||(i[7]=e=>d.onDragEnd(e)),onMousedown:i[8]||(i[8]=e=>d.onMouseDown(e,0)),onKeydown:i[9]||(i[9]=e=>d.onKeyDown(e,0)),tabindex:s.tabindex,role:"slider","aria-valuemin":s.min,"aria-valuenow":s.modelValue?s.modelValue[0]:null,"aria-valuemax":s.max,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-orientation":s.orientation},null,44,n)):t.createCommentVNode("",!0),s.range?(t.openBlock(),t.createElementBlock("span",{key:2,class:"p-slider-handle",style:t.normalizeStyle(d.rangeEndHandleStyle),onTouchstart:i[10]||(i[10]=e=>d.onDragStart(e,1)),onTouchmove:i[11]||(i[11]=e=>d.onDrag(e)),onTouchend:i[12]||(i[12]=e=>d.onDragEnd(e)),onMousedown:i[13]||(i[13]=e=>d.onMouseDown(e,1)),onKeydown:i[14]||(i[14]=e=>d.onKeyDown(e,1)),tabindex:s.tabindex,role:"slider","aria-valuemin":s.min,"aria-valuenow":s.modelValue?s.modelValue[1]:null,"aria-valuemax":s.max,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-orientation":s.orientation},null,44,l)):t.createCommentVNode("",!0)],2)},module.exports=i;
+"use strict";var e=require("primevue/utils"),t=require("vue"),i={name:"Slider",emits:["update:modelValue","change","slideend"],props:{modelValue:[Number,Array],min:{type:Number,default:0},max:{type:Number,default:100},orientation:{type:String,default:"horizontal"},step:{type:Number,default:null},range:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},tabindex:{type:Number,default:0},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},dragging:!1,handleIndex:null,initX:null,initY:null,barWidth:null,barHeight:null,dragListener:null,dragEndListener:null,beforeUnmount(){this.unbindDragListeners()},methods:{updateDomData(){let t=this.$el.getBoundingClientRect();this.initX=t.left+e.DomHandler.getWindowScrollLeft(),this.initY=t.top+e.DomHandler.getWindowScrollTop(),this.barWidth=this.$el.offsetWidth,this.barHeight=this.$el.offsetHeight},setValue(e){let t,i=e.touches?e.touches[0].pageX:e.pageX,a=e.touches?e.touches[0].pageY:e.pageY;t="horizontal"===this.orientation?100*(i-this.initX)/this.barWidth:100*(this.initY+this.barHeight-a)/this.barHeight;let n=(this.max-this.min)*(t/100)+this.min;if(this.step){const e=this.range?this.modelValue[this.handleIndex]:this.modelValue,t=n-e;t<0?n=e+Math.ceil(n/this.step-e/this.step)*this.step:t>0&&(n=e+Math.floor(n/this.step-e/this.step)*this.step)}else n=Math.floor(n);this.updateModel(e,n)},updateModel(e,t){let i,a=parseFloat(t.toFixed(10));this.range?(i=this.modelValue?[...this.modelValue]:[],0==this.handleIndex?(a<this.min?a=this.min:a>=this.max&&(a=this.max),a>i[1]?(i[1]=a,this.handleIndex=1):i[0]=a):(a>this.max?a=this.max:a<=this.min&&(a=this.min),a<i[0]?(i[0]=a,this.handleIndex=0):i[1]=a)):(a<this.min?a=this.min:a>this.max&&(a=this.max),i=a),this.$emit("update:modelValue",i),this.$emit("change",i)},onDragStart(t,i){this.disabled||(e.DomHandler.addClass(this.$el,"p-slider-sliding"),this.dragging=!0,this.updateDomData(),this.range&&this.modelValue[0]===this.max?this.handleIndex=0:this.handleIndex=i,t.preventDefault())},onDrag(e){this.dragging&&(this.setValue(e),e.preventDefault())},onDragEnd(t){this.dragging&&(this.dragging=!1,e.DomHandler.removeClass(this.$el,"p-slider-sliding"),this.$emit("slideend",{originalEvent:t,value:this.modelValue}))},onBarClick(t){this.disabled||e.DomHandler.hasClass(t.target,"p-slider-handle")||(this.updateDomData(),this.setValue(t))},onMouseDown(e,t){this.bindDragListeners(),this.onDragStart(e,t)},onKeyDown(e,t){switch(this.handleIndex=t,e.code){case"ArrowDown":case"ArrowLeft":this.decrementValue(e,t),e.preventDefault();break;case"ArrowUp":case"ArrowRight":this.incrementValue(e,t),e.preventDefault();break;case"PageDown":this.decrementValue(e,t,!0),e.preventDefault();break;case"PageUp":this.incrementValue(e,t,!0),e.preventDefault();break;case"Home":this.updateModel(e,this.min),e.preventDefault();break;case"End":this.updateModel(e,this.max),e.preventDefault()}},decrementValue(e,t,i=!1){let a;a=this.range?this.step?this.modelValue[t]-this.step:this.modelValue[t]-1:this.step?this.modelValue-this.step:!this.step&&i?this.modelValue-10:this.modelValue-1,this.updateModel(e,a),e.preventDefault()},incrementValue(e,t,i=!1){let a;a=this.range?this.step?this.modelValue[t]+this.step:this.modelValue[t]+1:this.step?this.modelValue+this.step:!this.step&&i?this.modelValue+10:this.modelValue+1,this.updateModel(e,a),e.preventDefault()},bindDragListeners(){this.dragListener||(this.dragListener=this.onDrag.bind(this),document.addEventListener("mousemove",this.dragListener)),this.dragEndListener||(this.dragEndListener=this.onDragEnd.bind(this),document.addEventListener("mouseup",this.dragEndListener))},unbindDragListeners(){this.dragListener&&(document.removeEventListener("mousemove",this.dragListener),this.dragListener=null),this.dragEndListener&&(document.removeEventListener("mouseup",this.dragEndListener),this.dragEndListener=null)}},computed:{containerClass(){return["p-slider p-component",{"p-disabled":this.disabled,"p-slider-horizontal":"horizontal"===this.orientation,"p-slider-vertical":"vertical"===this.orientation}]},horizontal(){return"horizontal"===this.orientation},vertical(){return"vertical"===this.orientation},rangeStyle(){if(this.range){const e=this.rangeEndPosition>this.rangeStartPosition?this.rangeEndPosition-this.rangeStartPosition:this.rangeStartPosition-this.rangeEndPosition,t=this.rangeEndPosition>this.rangeStartPosition?this.rangeStartPosition:this.rangeEndPosition;return this.horizontal?{left:t+"%",width:e+"%"}:{bottom:t+"%",height:e+"%"}}return this.horizontal?{width:this.handlePosition+"%"}:{height:this.handlePosition+"%"}},handleStyle(){return this.horizontal?{left:this.handlePosition+"%"}:{bottom:this.handlePosition+"%"}},handlePosition(){return this.modelValue<this.min?0:this.modelValue>this.max?100:100*(this.modelValue-this.min)/(this.max-this.min)},rangeStartPosition(){return this.modelValue&&this.modelValue[0]?100*(this.modelValue[0]<this.min?0:this.modelValue[0]-this.min)/(this.max-this.min):0},rangeEndPosition(){return this.modelValue&&2===this.modelValue.length?100*(this.modelValue[1]>this.max?100:this.modelValue[1]-this.min)/(this.max-this.min):100},rangeStartHandleStyle(){return this.horizontal?{left:this.rangeStartPosition+"%"}:{bottom:this.rangeStartPosition+"%"}},rangeEndHandleStyle(){return this.horizontal?{left:this.rangeEndPosition+"%"}:{bottom:this.rangeEndPosition+"%"}}}};const a=["tabindex","aria-valuemin","aria-valuenow","aria-valuemax","aria-labelledby","aria-label","aria-orientation"],n=["tabindex","aria-valuemin","aria-valuenow","aria-valuemax","aria-labelledby","aria-label","aria-orientation"],l=["tabindex","aria-valuemin","aria-valuenow","aria-valuemax","aria-labelledby","aria-label","aria-orientation"];!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===i&&a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-slider {\n    position: relative;\n}\n.p-slider .p-slider-handle {\n    position: absolute;\n    cursor: -webkit-grab;\n    cursor: grab;\n    -ms-touch-action: none;\n        touch-action: none;\n    display: block;\n}\n.p-slider-range {\n    position: absolute;\n    display: block;\n}\n.p-slider-horizontal .p-slider-range {\n    top: 0;\n    left: 0;\n    height: 100%;\n}\n.p-slider-horizontal .p-slider-handle {\n    top: 50%;\n}\n.p-slider-vertical {\n    height: 100px;\n}\n.p-slider-vertical .p-slider-handle {\n    left: 50%;\n}\n.p-slider-vertical .p-slider-range {\n    bottom: 0;\n    left: 0;\n    width: 100%;\n}\n"),i.render=function(e,i,s,o,r,d){return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(d.containerClass),onClick:i[15]||(i[15]=(...e)=>d.onBarClick&&d.onBarClick(...e))},[t.createElementVNode("span",{class:"p-slider-range",style:t.normalizeStyle(d.rangeStyle)},null,4),s.range?t.createCommentVNode("",!0):(t.openBlock(),t.createElementBlock("span",{key:0,class:"p-slider-handle",style:t.normalizeStyle(d.handleStyle),onTouchstart:i[0]||(i[0]=e=>d.onDragStart(e)),onTouchmove:i[1]||(i[1]=e=>d.onDrag(e)),onTouchend:i[2]||(i[2]=e=>d.onDragEnd(e)),onMousedown:i[3]||(i[3]=e=>d.onMouseDown(e)),onKeydown:i[4]||(i[4]=e=>d.onKeyDown(e)),tabindex:s.tabindex,role:"slider","aria-valuemin":s.min,"aria-valuenow":s.modelValue,"aria-valuemax":s.max,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-orientation":s.orientation},null,44,a)),s.range?(t.openBlock(),t.createElementBlock("span",{key:1,class:"p-slider-handle",style:t.normalizeStyle(d.rangeStartHandleStyle),onTouchstart:i[5]||(i[5]=e=>d.onDragStart(e,0)),onTouchmove:i[6]||(i[6]=e=>d.onDrag(e)),onTouchend:i[7]||(i[7]=e=>d.onDragEnd(e)),onMousedown:i[8]||(i[8]=e=>d.onMouseDown(e,0)),onKeydown:i[9]||(i[9]=e=>d.onKeyDown(e,0)),tabindex:s.tabindex,role:"slider","aria-valuemin":s.min,"aria-valuenow":s.modelValue?s.modelValue[0]:null,"aria-valuemax":s.max,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-orientation":s.orientation},null,44,n)):t.createCommentVNode("",!0),s.range?(t.openBlock(),t.createElementBlock("span",{key:2,class:"p-slider-handle",style:t.normalizeStyle(d.rangeEndHandleStyle),onTouchstart:i[10]||(i[10]=e=>d.onDragStart(e,1)),onTouchmove:i[11]||(i[11]=e=>d.onDrag(e)),onTouchend:i[12]||(i[12]=e=>d.onDragEnd(e)),onMousedown:i[13]||(i[13]=e=>d.onMouseDown(e,1)),onKeydown:i[14]||(i[14]=e=>d.onKeyDown(e,1)),tabindex:s.tabindex,role:"slider","aria-valuemin":s.min,"aria-valuenow":s.modelValue?s.modelValue[1]:null,"aria-valuemax":s.max,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-orientation":s.orientation},null,44,l)):t.createCommentVNode("",!0)],2)},module.exports=i;

package/slider/slider.esm.js

@@ -92,21 +92,27 @@ var script = {
                 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 >= maxValue) newValue = maxValue;
+                    else if (newValue >= this.max) newValue = this.max;
 
-                    modelValue[0] = newValue;
-                    modelValue[1] = modelValue[1] || this.max;
-                } else {
-                    let minValue = this.modelValue ? this.modelValue[0] : this.min;
+                    if (newValue > modelValue[1]) {
+                        modelValue[1] = newValue;
 
+                        this.handleIndex = 1;
+                    } else {
+                        modelValue[0] = newValue;
+                    }
+                } else {
                     if (newValue > this.max) newValue = this.max;
-                    else if (newValue <= minValue) newValue = minValue;
+                    else if (newValue <= this.min) newValue = this.min;
 
-                    modelValue[0] = modelValue[0] || this.min;
-                    modelValue[1] = newValue;
+                    if (newValue < modelValue[0]) {
+                        modelValue[0] = newValue;
+
+                        this.handleIndex = 0;
+                    } else {
+                        modelValue[1] = newValue;
+                    }
                 }
             } else {
                 if (newValue < this.min) newValue = this.min;
@@ -271,8 +277,11 @@ var script = {
         },
         rangeStyle() {
             if (this.range) {
-                if (this.horizontal) return { left: this.rangeStartPosition + '%', width: this.rangeEndPosition - this.rangeStartPosition + '%' };
-                else return { bottom: this.rangeStartPosition + '%', height: this.rangeEndPosition - this.rangeStartHandlePosition + '%' };
+                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 + '%' };

package/slider/slider.esm.min.js

@@ -1 +1 @@
-import{DomHandler as e}from"primevue/utils";import{openBlock as t,createElementBlock as i,normalizeClass as a,createElementVNode as n,normalizeStyle as l,createCommentVNode as s}from"vue";var r={name:"Slider",emits:["update:modelValue","change","slideend"],props:{modelValue:[Number,Array],min:{type:Number,default:0},max:{type:Number,default:100},orientation:{type:String,default:"horizontal"},step:{type:Number,default:null},range:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},tabindex:{type:Number,default:0},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},dragging:!1,handleIndex:null,initX:null,initY:null,barWidth:null,barHeight:null,dragListener:null,dragEndListener:null,beforeUnmount(){this.unbindDragListeners()},methods:{updateDomData(){let t=this.$el.getBoundingClientRect();this.initX=t.left+e.getWindowScrollLeft(),this.initY=t.top+e.getWindowScrollTop(),this.barWidth=this.$el.offsetWidth,this.barHeight=this.$el.offsetHeight},setValue(e){let t,i=e.touches?e.touches[0].pageX:e.pageX,a=e.touches?e.touches[0].pageY:e.pageY;t="horizontal"===this.orientation?100*(i-this.initX)/this.barWidth:100*(this.initY+this.barHeight-a)/this.barHeight;let n=(this.max-this.min)*(t/100)+this.min;if(this.step){const e=this.range?this.modelValue[this.handleIndex]:this.modelValue,t=n-e;t<0?n=e+Math.ceil(n/this.step-e/this.step)*this.step:t>0&&(n=e+Math.floor(n/this.step-e/this.step)*this.step)}else n=Math.floor(n);this.updateModel(e,n)},updateModel(e,t){let i,a=parseFloat(t.toFixed(10));if(this.range)if(i=this.modelValue?[...this.modelValue]:[],0==this.handleIndex){let e=this.modelValue?this.modelValue[1]:this.max;a<this.min?a=this.min:a>=e&&(a=e),i[0]=a,i[1]=i[1]||this.max}else{let e=this.modelValue?this.modelValue[0]:this.min;a>this.max?a=this.max:a<=e&&(a=e),i[0]=i[0]||this.min,i[1]=a}else a<this.min?a=this.min:a>this.max&&(a=this.max),i=a;this.$emit("update:modelValue",i),this.$emit("change",i)},onDragStart(t,i){this.disabled||(e.addClass(this.$el,"p-slider-sliding"),this.dragging=!0,this.updateDomData(),this.range&&this.modelValue[0]===this.max?this.handleIndex=0:this.handleIndex=i,t.preventDefault())},onDrag(e){this.dragging&&(this.setValue(e),e.preventDefault())},onDragEnd(t){this.dragging&&(this.dragging=!1,e.removeClass(this.$el,"p-slider-sliding"),this.$emit("slideend",{originalEvent:t,value:this.modelValue}))},onBarClick(t){this.disabled||e.hasClass(t.target,"p-slider-handle")||(this.updateDomData(),this.setValue(t))},onMouseDown(e,t){this.bindDragListeners(),this.onDragStart(e,t)},onKeyDown(e,t){switch(this.handleIndex=t,e.code){case"ArrowDown":case"ArrowLeft":this.decrementValue(e,t),e.preventDefault();break;case"ArrowUp":case"ArrowRight":this.incrementValue(e,t),e.preventDefault();break;case"PageDown":this.decrementValue(e,t,!0),e.preventDefault();break;case"PageUp":this.incrementValue(e,t,!0),e.preventDefault();break;case"Home":this.updateModel(e,this.min),e.preventDefault();break;case"End":this.updateModel(e,this.max),e.preventDefault()}},decrementValue(e,t,i=!1){let a;a=this.range?this.step?this.modelValue[t]-this.step:this.modelValue[t]-1:this.step?this.modelValue-this.step:!this.step&&i?this.modelValue-10:this.modelValue-1,this.updateModel(e,a),e.preventDefault()},incrementValue(e,t,i=!1){let a;a=this.range?this.step?this.modelValue[t]+this.step:this.modelValue[t]+1:this.step?this.modelValue+this.step:!this.step&&i?this.modelValue+10:this.modelValue+1,this.updateModel(e,a),e.preventDefault()},bindDragListeners(){this.dragListener||(this.dragListener=this.onDrag.bind(this),document.addEventListener("mousemove",this.dragListener)),this.dragEndListener||(this.dragEndListener=this.onDragEnd.bind(this),document.addEventListener("mouseup",this.dragEndListener))},unbindDragListeners(){this.dragListener&&(document.removeEventListener("mousemove",this.dragListener),this.dragListener=null),this.dragEndListener&&(document.removeEventListener("mouseup",this.dragEndListener),this.dragEndListener=null)}},computed:{containerClass(){return["p-slider p-component",{"p-disabled":this.disabled,"p-slider-horizontal":"horizontal"===this.orientation,"p-slider-vertical":"vertical"===this.orientation}]},horizontal(){return"horizontal"===this.orientation},vertical(){return"vertical"===this.orientation},rangeStyle(){return this.range?this.horizontal?{left:this.rangeStartPosition+"%",width:this.rangeEndPosition-this.rangeStartPosition+"%"}:{bottom:this.rangeStartPosition+"%",height:this.rangeEndPosition-this.rangeStartHandlePosition+"%"}:this.horizontal?{width:this.handlePosition+"%"}:{height:this.handlePosition+"%"}},handleStyle(){return this.horizontal?{left:this.handlePosition+"%"}:{bottom:this.handlePosition+"%"}},handlePosition(){return this.modelValue<this.min?0:this.modelValue>this.max?100:100*(this.modelValue-this.min)/(this.max-this.min)},rangeStartPosition(){return this.modelValue&&this.modelValue[0]?100*(this.modelValue[0]<this.min?0:this.modelValue[0]-this.min)/(this.max-this.min):0},rangeEndPosition(){return this.modelValue&&2===this.modelValue.length?100*(this.modelValue[1]>this.max?100:this.modelValue[1]-this.min)/(this.max-this.min):100},rangeStartHandleStyle(){return this.horizontal?{left:this.rangeStartPosition+"%"}:{bottom:this.rangeStartPosition+"%"}},rangeEndHandleStyle(){return this.horizontal?{left:this.rangeEndPosition+"%"}:{bottom:this.rangeEndPosition+"%"}}}};const o=["tabindex","aria-valuemin","aria-valuenow","aria-valuemax","aria-labelledby","aria-label","aria-orientation"],d=["tabindex","aria-valuemin","aria-valuenow","aria-valuemax","aria-labelledby","aria-label","aria-orientation"],h=["tabindex","aria-valuemin","aria-valuenow","aria-valuemax","aria-labelledby","aria-label","aria-orientation"];!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===i&&a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-slider {\n    position: relative;\n}\n.p-slider .p-slider-handle {\n    position: absolute;\n    cursor: -webkit-grab;\n    cursor: grab;\n    -ms-touch-action: none;\n        touch-action: none;\n    display: block;\n}\n.p-slider-range {\n    position: absolute;\n    display: block;\n}\n.p-slider-horizontal .p-slider-range {\n    top: 0;\n    left: 0;\n    height: 100%;\n}\n.p-slider-horizontal .p-slider-handle {\n    top: 50%;\n}\n.p-slider-vertical {\n    height: 100px;\n}\n.p-slider-vertical .p-slider-handle {\n    left: 50%;\n}\n.p-slider-vertical .p-slider-range {\n    bottom: 0;\n    left: 0;\n    width: 100%;\n}\n"),r.render=function(e,r,u,m,g,p){return t(),i("div",{class:a(p.containerClass),onClick:r[15]||(r[15]=(...e)=>p.onBarClick&&p.onBarClick(...e))},[n("span",{class:"p-slider-range",style:l(p.rangeStyle)},null,4),u.range?s("",!0):(t(),i("span",{key:0,class:"p-slider-handle",style:l(p.handleStyle),onTouchstart:r[0]||(r[0]=e=>p.onDragStart(e)),onTouchmove:r[1]||(r[1]=e=>p.onDrag(e)),onTouchend:r[2]||(r[2]=e=>p.onDragEnd(e)),onMousedown:r[3]||(r[3]=e=>p.onMouseDown(e)),onKeydown:r[4]||(r[4]=e=>p.onKeyDown(e)),tabindex:u.tabindex,role:"slider","aria-valuemin":u.min,"aria-valuenow":u.modelValue,"aria-valuemax":u.max,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-orientation":u.orientation},null,44,o)),u.range?(t(),i("span",{key:1,class:"p-slider-handle",style:l(p.rangeStartHandleStyle),onTouchstart:r[5]||(r[5]=e=>p.onDragStart(e,0)),onTouchmove:r[6]||(r[6]=e=>p.onDrag(e)),onTouchend:r[7]||(r[7]=e=>p.onDragEnd(e)),onMousedown:r[8]||(r[8]=e=>p.onMouseDown(e,0)),onKeydown:r[9]||(r[9]=e=>p.onKeyDown(e,0)),tabindex:u.tabindex,role:"slider","aria-valuemin":u.min,"aria-valuenow":u.modelValue?u.modelValue[0]:null,"aria-valuemax":u.max,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-orientation":u.orientation},null,44,d)):s("",!0),u.range?(t(),i("span",{key:2,class:"p-slider-handle",style:l(p.rangeEndHandleStyle),onTouchstart:r[10]||(r[10]=e=>p.onDragStart(e,1)),onTouchmove:r[11]||(r[11]=e=>p.onDrag(e)),onTouchend:r[12]||(r[12]=e=>p.onDragEnd(e)),onMousedown:r[13]||(r[13]=e=>p.onMouseDown(e,1)),onKeydown:r[14]||(r[14]=e=>p.onKeyDown(e,1)),tabindex:u.tabindex,role:"slider","aria-valuemin":u.min,"aria-valuenow":u.modelValue?u.modelValue[1]:null,"aria-valuemax":u.max,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-orientation":u.orientation},null,44,h)):s("",!0)],2)};export{r as default};
+import{DomHandler as e}from"primevue/utils";import{openBlock as t,createElementBlock as i,normalizeClass as a,createElementVNode as n,normalizeStyle as l,createCommentVNode as s}from"vue";var r={name:"Slider",emits:["update:modelValue","change","slideend"],props:{modelValue:[Number,Array],min:{type:Number,default:0},max:{type:Number,default:100},orientation:{type:String,default:"horizontal"},step:{type:Number,default:null},range:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},tabindex:{type:Number,default:0},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},dragging:!1,handleIndex:null,initX:null,initY:null,barWidth:null,barHeight:null,dragListener:null,dragEndListener:null,beforeUnmount(){this.unbindDragListeners()},methods:{updateDomData(){let t=this.$el.getBoundingClientRect();this.initX=t.left+e.getWindowScrollLeft(),this.initY=t.top+e.getWindowScrollTop(),this.barWidth=this.$el.offsetWidth,this.barHeight=this.$el.offsetHeight},setValue(e){let t,i=e.touches?e.touches[0].pageX:e.pageX,a=e.touches?e.touches[0].pageY:e.pageY;t="horizontal"===this.orientation?100*(i-this.initX)/this.barWidth:100*(this.initY+this.barHeight-a)/this.barHeight;let n=(this.max-this.min)*(t/100)+this.min;if(this.step){const e=this.range?this.modelValue[this.handleIndex]:this.modelValue,t=n-e;t<0?n=e+Math.ceil(n/this.step-e/this.step)*this.step:t>0&&(n=e+Math.floor(n/this.step-e/this.step)*this.step)}else n=Math.floor(n);this.updateModel(e,n)},updateModel(e,t){let i,a=parseFloat(t.toFixed(10));this.range?(i=this.modelValue?[...this.modelValue]:[],0==this.handleIndex?(a<this.min?a=this.min:a>=this.max&&(a=this.max),a>i[1]?(i[1]=a,this.handleIndex=1):i[0]=a):(a>this.max?a=this.max:a<=this.min&&(a=this.min),a<i[0]?(i[0]=a,this.handleIndex=0):i[1]=a)):(a<this.min?a=this.min:a>this.max&&(a=this.max),i=a),this.$emit("update:modelValue",i),this.$emit("change",i)},onDragStart(t,i){this.disabled||(e.addClass(this.$el,"p-slider-sliding"),this.dragging=!0,this.updateDomData(),this.range&&this.modelValue[0]===this.max?this.handleIndex=0:this.handleIndex=i,t.preventDefault())},onDrag(e){this.dragging&&(this.setValue(e),e.preventDefault())},onDragEnd(t){this.dragging&&(this.dragging=!1,e.removeClass(this.$el,"p-slider-sliding"),this.$emit("slideend",{originalEvent:t,value:this.modelValue}))},onBarClick(t){this.disabled||e.hasClass(t.target,"p-slider-handle")||(this.updateDomData(),this.setValue(t))},onMouseDown(e,t){this.bindDragListeners(),this.onDragStart(e,t)},onKeyDown(e,t){switch(this.handleIndex=t,e.code){case"ArrowDown":case"ArrowLeft":this.decrementValue(e,t),e.preventDefault();break;case"ArrowUp":case"ArrowRight":this.incrementValue(e,t),e.preventDefault();break;case"PageDown":this.decrementValue(e,t,!0),e.preventDefault();break;case"PageUp":this.incrementValue(e,t,!0),e.preventDefault();break;case"Home":this.updateModel(e,this.min),e.preventDefault();break;case"End":this.updateModel(e,this.max),e.preventDefault()}},decrementValue(e,t,i=!1){let a;a=this.range?this.step?this.modelValue[t]-this.step:this.modelValue[t]-1:this.step?this.modelValue-this.step:!this.step&&i?this.modelValue-10:this.modelValue-1,this.updateModel(e,a),e.preventDefault()},incrementValue(e,t,i=!1){let a;a=this.range?this.step?this.modelValue[t]+this.step:this.modelValue[t]+1:this.step?this.modelValue+this.step:!this.step&&i?this.modelValue+10:this.modelValue+1,this.updateModel(e,a),e.preventDefault()},bindDragListeners(){this.dragListener||(this.dragListener=this.onDrag.bind(this),document.addEventListener("mousemove",this.dragListener)),this.dragEndListener||(this.dragEndListener=this.onDragEnd.bind(this),document.addEventListener("mouseup",this.dragEndListener))},unbindDragListeners(){this.dragListener&&(document.removeEventListener("mousemove",this.dragListener),this.dragListener=null),this.dragEndListener&&(document.removeEventListener("mouseup",this.dragEndListener),this.dragEndListener=null)}},computed:{containerClass(){return["p-slider p-component",{"p-disabled":this.disabled,"p-slider-horizontal":"horizontal"===this.orientation,"p-slider-vertical":"vertical"===this.orientation}]},horizontal(){return"horizontal"===this.orientation},vertical(){return"vertical"===this.orientation},rangeStyle(){if(this.range){const e=this.rangeEndPosition>this.rangeStartPosition?this.rangeEndPosition-this.rangeStartPosition:this.rangeStartPosition-this.rangeEndPosition,t=this.rangeEndPosition>this.rangeStartPosition?this.rangeStartPosition:this.rangeEndPosition;return this.horizontal?{left:t+"%",width:e+"%"}:{bottom:t+"%",height:e+"%"}}return this.horizontal?{width:this.handlePosition+"%"}:{height:this.handlePosition+"%"}},handleStyle(){return this.horizontal?{left:this.handlePosition+"%"}:{bottom:this.handlePosition+"%"}},handlePosition(){return this.modelValue<this.min?0:this.modelValue>this.max?100:100*(this.modelValue-this.min)/(this.max-this.min)},rangeStartPosition(){return this.modelValue&&this.modelValue[0]?100*(this.modelValue[0]<this.min?0:this.modelValue[0]-this.min)/(this.max-this.min):0},rangeEndPosition(){return this.modelValue&&2===this.modelValue.length?100*(this.modelValue[1]>this.max?100:this.modelValue[1]-this.min)/(this.max-this.min):100},rangeStartHandleStyle(){return this.horizontal?{left:this.rangeStartPosition+"%"}:{bottom:this.rangeStartPosition+"%"}},rangeEndHandleStyle(){return this.horizontal?{left:this.rangeEndPosition+"%"}:{bottom:this.rangeEndPosition+"%"}}}};const o=["tabindex","aria-valuemin","aria-valuenow","aria-valuemax","aria-labelledby","aria-label","aria-orientation"],d=["tabindex","aria-valuemin","aria-valuenow","aria-valuemax","aria-labelledby","aria-label","aria-orientation"],h=["tabindex","aria-valuemin","aria-valuenow","aria-valuemax","aria-labelledby","aria-label","aria-orientation"];!function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===i&&a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-slider {\n    position: relative;\n}\n.p-slider .p-slider-handle {\n    position: absolute;\n    cursor: -webkit-grab;\n    cursor: grab;\n    -ms-touch-action: none;\n        touch-action: none;\n    display: block;\n}\n.p-slider-range {\n    position: absolute;\n    display: block;\n}\n.p-slider-horizontal .p-slider-range {\n    top: 0;\n    left: 0;\n    height: 100%;\n}\n.p-slider-horizontal .p-slider-handle {\n    top: 50%;\n}\n.p-slider-vertical {\n    height: 100px;\n}\n.p-slider-vertical .p-slider-handle {\n    left: 50%;\n}\n.p-slider-vertical .p-slider-range {\n    bottom: 0;\n    left: 0;\n    width: 100%;\n}\n"),r.render=function(e,r,u,m,g,p){return t(),i("div",{class:a(p.containerClass),onClick:r[15]||(r[15]=(...e)=>p.onBarClick&&p.onBarClick(...e))},[n("span",{class:"p-slider-range",style:l(p.rangeStyle)},null,4),u.range?s("",!0):(t(),i("span",{key:0,class:"p-slider-handle",style:l(p.handleStyle),onTouchstart:r[0]||(r[0]=e=>p.onDragStart(e)),onTouchmove:r[1]||(r[1]=e=>p.onDrag(e)),onTouchend:r[2]||(r[2]=e=>p.onDragEnd(e)),onMousedown:r[3]||(r[3]=e=>p.onMouseDown(e)),onKeydown:r[4]||(r[4]=e=>p.onKeyDown(e)),tabindex:u.tabindex,role:"slider","aria-valuemin":u.min,"aria-valuenow":u.modelValue,"aria-valuemax":u.max,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-orientation":u.orientation},null,44,o)),u.range?(t(),i("span",{key:1,class:"p-slider-handle",style:l(p.rangeStartHandleStyle),onTouchstart:r[5]||(r[5]=e=>p.onDragStart(e,0)),onTouchmove:r[6]||(r[6]=e=>p.onDrag(e)),onTouchend:r[7]||(r[7]=e=>p.onDragEnd(e)),onMousedown:r[8]||(r[8]=e=>p.onMouseDown(e,0)),onKeydown:r[9]||(r[9]=e=>p.onKeyDown(e,0)),tabindex:u.tabindex,role:"slider","aria-valuemin":u.min,"aria-valuenow":u.modelValue?u.modelValue[0]:null,"aria-valuemax":u.max,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-orientation":u.orientation},null,44,d)):s("",!0),u.range?(t(),i("span",{key:2,class:"p-slider-handle",style:l(p.rangeEndHandleStyle),onTouchstart:r[10]||(r[10]=e=>p.onDragStart(e,1)),onTouchmove:r[11]||(r[11]=e=>p.onDrag(e)),onTouchend:r[12]||(r[12]=e=>p.onDragEnd(e)),onMousedown:r[13]||(r[13]=e=>p.onMouseDown(e,1)),onKeydown:r[14]||(r[14]=e=>p.onKeyDown(e,1)),tabindex:u.tabindex,role:"slider","aria-valuemin":u.min,"aria-valuenow":u.modelValue?u.modelValue[1]:null,"aria-valuemax":u.max,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-orientation":u.orientation},null,44,h)):s("",!0)],2)};export{r as default};

package/slider/slider.js

@@ -93,21 +93,27 @@ this.primevue.slider = (function (utils, vue) {
                     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 >= maxValue) newValue = maxValue;
+                        else if (newValue >= this.max) newValue = this.max;
 
-                        modelValue[0] = newValue;
-                        modelValue[1] = modelValue[1] || this.max;
-                    } else {
-                        let minValue = this.modelValue ? this.modelValue[0] : this.min;
+                        if (newValue > modelValue[1]) {
+                            modelValue[1] = newValue;
 
+                            this.handleIndex = 1;
+                        } else {
+                            modelValue[0] = newValue;
+                        }
+                    } else {
                         if (newValue > this.max) newValue = this.max;
-                        else if (newValue <= minValue) newValue = minValue;
+                        else if (newValue <= this.min) newValue = this.min;
 
-                        modelValue[0] = modelValue[0] || this.min;
-                        modelValue[1] = newValue;
+                        if (newValue < modelValue[0]) {
+                            modelValue[0] = newValue;
+
+                            this.handleIndex = 0;
+                        } else {
+                            modelValue[1] = newValue;
+                        }
                     }
                 } else {
                     if (newValue < this.min) newValue = this.min;
@@ -272,8 +278,11 @@ this.primevue.slider = (function (utils, vue) {
             },
             rangeStyle() {
                 if (this.range) {
-                    if (this.horizontal) return { left: this.rangeStartPosition + '%', width: this.rangeEndPosition - this.rangeStartPosition + '%' };
-                    else return { bottom: this.rangeStartPosition + '%', height: this.rangeEndPosition - this.rangeStartHandlePosition + '%' };
+                    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 + '%' };

package/slider/slider.min.js

@@ -1 +1 @@
-this.primevue=this.primevue||{},this.primevue.slider=function(e,t){"use strict";var i={name:"Slider",emits:["update:modelValue","change","slideend"],props:{modelValue:[Number,Array],min:{type:Number,default:0},max:{type:Number,default:100},orientation:{type:String,default:"horizontal"},step:{type:Number,default:null},range:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},tabindex:{type:Number,default:0},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},dragging:!1,handleIndex:null,initX:null,initY:null,barWidth:null,barHeight:null,dragListener:null,dragEndListener:null,beforeUnmount(){this.unbindDragListeners()},methods:{updateDomData(){let t=this.$el.getBoundingClientRect();this.initX=t.left+e.DomHandler.getWindowScrollLeft(),this.initY=t.top+e.DomHandler.getWindowScrollTop(),this.barWidth=this.$el.offsetWidth,this.barHeight=this.$el.offsetHeight},setValue(e){let t,i=e.touches?e.touches[0].pageX:e.pageX,a=e.touches?e.touches[0].pageY:e.pageY;t="horizontal"===this.orientation?100*(i-this.initX)/this.barWidth:100*(this.initY+this.barHeight-a)/this.barHeight;let n=(this.max-this.min)*(t/100)+this.min;if(this.step){const e=this.range?this.modelValue[this.handleIndex]:this.modelValue,t=n-e;t<0?n=e+Math.ceil(n/this.step-e/this.step)*this.step:t>0&&(n=e+Math.floor(n/this.step-e/this.step)*this.step)}else n=Math.floor(n);this.updateModel(e,n)},updateModel(e,t){let i,a=parseFloat(t.toFixed(10));if(this.range)if(i=this.modelValue?[...this.modelValue]:[],0==this.handleIndex){let e=this.modelValue?this.modelValue[1]:this.max;a<this.min?a=this.min:a>=e&&(a=e),i[0]=a,i[1]=i[1]||this.max}else{let e=this.modelValue?this.modelValue[0]:this.min;a>this.max?a=this.max:a<=e&&(a=e),i[0]=i[0]||this.min,i[1]=a}else a<this.min?a=this.min:a>this.max&&(a=this.max),i=a;this.$emit("update:modelValue",i),this.$emit("change",i)},onDragStart(t,i){this.disabled||(e.DomHandler.addClass(this.$el,"p-slider-sliding"),this.dragging=!0,this.updateDomData(),this.range&&this.modelValue[0]===this.max?this.handleIndex=0:this.handleIndex=i,t.preventDefault())},onDrag(e){this.dragging&&(this.setValue(e),e.preventDefault())},onDragEnd(t){this.dragging&&(this.dragging=!1,e.DomHandler.removeClass(this.$el,"p-slider-sliding"),this.$emit("slideend",{originalEvent:t,value:this.modelValue}))},onBarClick(t){this.disabled||e.DomHandler.hasClass(t.target,"p-slider-handle")||(this.updateDomData(),this.setValue(t))},onMouseDown(e,t){this.bindDragListeners(),this.onDragStart(e,t)},onKeyDown(e,t){switch(this.handleIndex=t,e.code){case"ArrowDown":case"ArrowLeft":this.decrementValue(e,t),e.preventDefault();break;case"ArrowUp":case"ArrowRight":this.incrementValue(e,t),e.preventDefault();break;case"PageDown":this.decrementValue(e,t,!0),e.preventDefault();break;case"PageUp":this.incrementValue(e,t,!0),e.preventDefault();break;case"Home":this.updateModel(e,this.min),e.preventDefault();break;case"End":this.updateModel(e,this.max),e.preventDefault()}},decrementValue(e,t,i=!1){let a;a=this.range?this.step?this.modelValue[t]-this.step:this.modelValue[t]-1:this.step?this.modelValue-this.step:!this.step&&i?this.modelValue-10:this.modelValue-1,this.updateModel(e,a),e.preventDefault()},incrementValue(e,t,i=!1){let a;a=this.range?this.step?this.modelValue[t]+this.step:this.modelValue[t]+1:this.step?this.modelValue+this.step:!this.step&&i?this.modelValue+10:this.modelValue+1,this.updateModel(e,a),e.preventDefault()},bindDragListeners(){this.dragListener||(this.dragListener=this.onDrag.bind(this),document.addEventListener("mousemove",this.dragListener)),this.dragEndListener||(this.dragEndListener=this.onDragEnd.bind(this),document.addEventListener("mouseup",this.dragEndListener))},unbindDragListeners(){this.dragListener&&(document.removeEventListener("mousemove",this.dragListener),this.dragListener=null),this.dragEndListener&&(document.removeEventListener("mouseup",this.dragEndListener),this.dragEndListener=null)}},computed:{containerClass(){return["p-slider p-component",{"p-disabled":this.disabled,"p-slider-horizontal":"horizontal"===this.orientation,"p-slider-vertical":"vertical"===this.orientation}]},horizontal(){return"horizontal"===this.orientation},vertical(){return"vertical"===this.orientation},rangeStyle(){return this.range?this.horizontal?{left:this.rangeStartPosition+"%",width:this.rangeEndPosition-this.rangeStartPosition+"%"}:{bottom:this.rangeStartPosition+"%",height:this.rangeEndPosition-this.rangeStartHandlePosition+"%"}:this.horizontal?{width:this.handlePosition+"%"}:{height:this.handlePosition+"%"}},handleStyle(){return this.horizontal?{left:this.handlePosition+"%"}:{bottom:this.handlePosition+"%"}},handlePosition(){return this.modelValue<this.min?0:this.modelValue>this.max?100:100*(this.modelValue-this.min)/(this.max-this.min)},rangeStartPosition(){return this.modelValue&&this.modelValue[0]?100*(this.modelValue[0]<this.min?0:this.modelValue[0]-this.min)/(this.max-this.min):0},rangeEndPosition(){return this.modelValue&&2===this.modelValue.length?100*(this.modelValue[1]>this.max?100:this.modelValue[1]-this.min)/(this.max-this.min):100},rangeStartHandleStyle(){return this.horizontal?{left:this.rangeStartPosition+"%"}:{bottom:this.rangeStartPosition+"%"}},rangeEndHandleStyle(){return this.horizontal?{left:this.rangeEndPosition+"%"}:{bottom:this.rangeEndPosition+"%"}}}};const a=["tabindex","aria-valuemin","aria-valuenow","aria-valuemax","aria-labelledby","aria-label","aria-orientation"],n=["tabindex","aria-valuemin","aria-valuenow","aria-valuemax","aria-labelledby","aria-label","aria-orientation"],l=["tabindex","aria-valuemin","aria-valuenow","aria-valuemax","aria-labelledby","aria-label","aria-orientation"];return function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===i&&a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-slider {\n    position: relative;\n}\n.p-slider .p-slider-handle {\n    position: absolute;\n    cursor: -webkit-grab;\n    cursor: grab;\n    -ms-touch-action: none;\n        touch-action: none;\n    display: block;\n}\n.p-slider-range {\n    position: absolute;\n    display: block;\n}\n.p-slider-horizontal .p-slider-range {\n    top: 0;\n    left: 0;\n    height: 100%;\n}\n.p-slider-horizontal .p-slider-handle {\n    top: 50%;\n}\n.p-slider-vertical {\n    height: 100px;\n}\n.p-slider-vertical .p-slider-handle {\n    left: 50%;\n}\n.p-slider-vertical .p-slider-range {\n    bottom: 0;\n    left: 0;\n    width: 100%;\n}\n"),i.render=function(e,i,s,o,r,d){return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(d.containerClass),onClick:i[15]||(i[15]=(...e)=>d.onBarClick&&d.onBarClick(...e))},[t.createElementVNode("span",{class:"p-slider-range",style:t.normalizeStyle(d.rangeStyle)},null,4),s.range?t.createCommentVNode("",!0):(t.openBlock(),t.createElementBlock("span",{key:0,class:"p-slider-handle",style:t.normalizeStyle(d.handleStyle),onTouchstart:i[0]||(i[0]=e=>d.onDragStart(e)),onTouchmove:i[1]||(i[1]=e=>d.onDrag(e)),onTouchend:i[2]||(i[2]=e=>d.onDragEnd(e)),onMousedown:i[3]||(i[3]=e=>d.onMouseDown(e)),onKeydown:i[4]||(i[4]=e=>d.onKeyDown(e)),tabindex:s.tabindex,role:"slider","aria-valuemin":s.min,"aria-valuenow":s.modelValue,"aria-valuemax":s.max,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-orientation":s.orientation},null,44,a)),s.range?(t.openBlock(),t.createElementBlock("span",{key:1,class:"p-slider-handle",style:t.normalizeStyle(d.rangeStartHandleStyle),onTouchstart:i[5]||(i[5]=e=>d.onDragStart(e,0)),onTouchmove:i[6]||(i[6]=e=>d.onDrag(e)),onTouchend:i[7]||(i[7]=e=>d.onDragEnd(e)),onMousedown:i[8]||(i[8]=e=>d.onMouseDown(e,0)),onKeydown:i[9]||(i[9]=e=>d.onKeyDown(e,0)),tabindex:s.tabindex,role:"slider","aria-valuemin":s.min,"aria-valuenow":s.modelValue?s.modelValue[0]:null,"aria-valuemax":s.max,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-orientation":s.orientation},null,44,n)):t.createCommentVNode("",!0),s.range?(t.openBlock(),t.createElementBlock("span",{key:2,class:"p-slider-handle",style:t.normalizeStyle(d.rangeEndHandleStyle),onTouchstart:i[10]||(i[10]=e=>d.onDragStart(e,1)),onTouchmove:i[11]||(i[11]=e=>d.onDrag(e)),onTouchend:i[12]||(i[12]=e=>d.onDragEnd(e)),onMousedown:i[13]||(i[13]=e=>d.onMouseDown(e,1)),onKeydown:i[14]||(i[14]=e=>d.onKeyDown(e,1)),tabindex:s.tabindex,role:"slider","aria-valuemin":s.min,"aria-valuenow":s.modelValue?s.modelValue[1]:null,"aria-valuemax":s.max,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-orientation":s.orientation},null,44,l)):t.createCommentVNode("",!0)],2)},i}(primevue.utils,Vue);
+this.primevue=this.primevue||{},this.primevue.slider=function(e,t){"use strict";var i={name:"Slider",emits:["update:modelValue","change","slideend"],props:{modelValue:[Number,Array],min:{type:Number,default:0},max:{type:Number,default:100},orientation:{type:String,default:"horizontal"},step:{type:Number,default:null},range:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},tabindex:{type:Number,default:0},"aria-labelledby":{type:String,default:null},"aria-label":{type:String,default:null}},dragging:!1,handleIndex:null,initX:null,initY:null,barWidth:null,barHeight:null,dragListener:null,dragEndListener:null,beforeUnmount(){this.unbindDragListeners()},methods:{updateDomData(){let t=this.$el.getBoundingClientRect();this.initX=t.left+e.DomHandler.getWindowScrollLeft(),this.initY=t.top+e.DomHandler.getWindowScrollTop(),this.barWidth=this.$el.offsetWidth,this.barHeight=this.$el.offsetHeight},setValue(e){let t,i=e.touches?e.touches[0].pageX:e.pageX,a=e.touches?e.touches[0].pageY:e.pageY;t="horizontal"===this.orientation?100*(i-this.initX)/this.barWidth:100*(this.initY+this.barHeight-a)/this.barHeight;let n=(this.max-this.min)*(t/100)+this.min;if(this.step){const e=this.range?this.modelValue[this.handleIndex]:this.modelValue,t=n-e;t<0?n=e+Math.ceil(n/this.step-e/this.step)*this.step:t>0&&(n=e+Math.floor(n/this.step-e/this.step)*this.step)}else n=Math.floor(n);this.updateModel(e,n)},updateModel(e,t){let i,a=parseFloat(t.toFixed(10));this.range?(i=this.modelValue?[...this.modelValue]:[],0==this.handleIndex?(a<this.min?a=this.min:a>=this.max&&(a=this.max),a>i[1]?(i[1]=a,this.handleIndex=1):i[0]=a):(a>this.max?a=this.max:a<=this.min&&(a=this.min),a<i[0]?(i[0]=a,this.handleIndex=0):i[1]=a)):(a<this.min?a=this.min:a>this.max&&(a=this.max),i=a),this.$emit("update:modelValue",i),this.$emit("change",i)},onDragStart(t,i){this.disabled||(e.DomHandler.addClass(this.$el,"p-slider-sliding"),this.dragging=!0,this.updateDomData(),this.range&&this.modelValue[0]===this.max?this.handleIndex=0:this.handleIndex=i,t.preventDefault())},onDrag(e){this.dragging&&(this.setValue(e),e.preventDefault())},onDragEnd(t){this.dragging&&(this.dragging=!1,e.DomHandler.removeClass(this.$el,"p-slider-sliding"),this.$emit("slideend",{originalEvent:t,value:this.modelValue}))},onBarClick(t){this.disabled||e.DomHandler.hasClass(t.target,"p-slider-handle")||(this.updateDomData(),this.setValue(t))},onMouseDown(e,t){this.bindDragListeners(),this.onDragStart(e,t)},onKeyDown(e,t){switch(this.handleIndex=t,e.code){case"ArrowDown":case"ArrowLeft":this.decrementValue(e,t),e.preventDefault();break;case"ArrowUp":case"ArrowRight":this.incrementValue(e,t),e.preventDefault();break;case"PageDown":this.decrementValue(e,t,!0),e.preventDefault();break;case"PageUp":this.incrementValue(e,t,!0),e.preventDefault();break;case"Home":this.updateModel(e,this.min),e.preventDefault();break;case"End":this.updateModel(e,this.max),e.preventDefault()}},decrementValue(e,t,i=!1){let a;a=this.range?this.step?this.modelValue[t]-this.step:this.modelValue[t]-1:this.step?this.modelValue-this.step:!this.step&&i?this.modelValue-10:this.modelValue-1,this.updateModel(e,a),e.preventDefault()},incrementValue(e,t,i=!1){let a;a=this.range?this.step?this.modelValue[t]+this.step:this.modelValue[t]+1:this.step?this.modelValue+this.step:!this.step&&i?this.modelValue+10:this.modelValue+1,this.updateModel(e,a),e.preventDefault()},bindDragListeners(){this.dragListener||(this.dragListener=this.onDrag.bind(this),document.addEventListener("mousemove",this.dragListener)),this.dragEndListener||(this.dragEndListener=this.onDragEnd.bind(this),document.addEventListener("mouseup",this.dragEndListener))},unbindDragListeners(){this.dragListener&&(document.removeEventListener("mousemove",this.dragListener),this.dragListener=null),this.dragEndListener&&(document.removeEventListener("mouseup",this.dragEndListener),this.dragEndListener=null)}},computed:{containerClass(){return["p-slider p-component",{"p-disabled":this.disabled,"p-slider-horizontal":"horizontal"===this.orientation,"p-slider-vertical":"vertical"===this.orientation}]},horizontal(){return"horizontal"===this.orientation},vertical(){return"vertical"===this.orientation},rangeStyle(){if(this.range){const e=this.rangeEndPosition>this.rangeStartPosition?this.rangeEndPosition-this.rangeStartPosition:this.rangeStartPosition-this.rangeEndPosition,t=this.rangeEndPosition>this.rangeStartPosition?this.rangeStartPosition:this.rangeEndPosition;return this.horizontal?{left:t+"%",width:e+"%"}:{bottom:t+"%",height:e+"%"}}return this.horizontal?{width:this.handlePosition+"%"}:{height:this.handlePosition+"%"}},handleStyle(){return this.horizontal?{left:this.handlePosition+"%"}:{bottom:this.handlePosition+"%"}},handlePosition(){return this.modelValue<this.min?0:this.modelValue>this.max?100:100*(this.modelValue-this.min)/(this.max-this.min)},rangeStartPosition(){return this.modelValue&&this.modelValue[0]?100*(this.modelValue[0]<this.min?0:this.modelValue[0]-this.min)/(this.max-this.min):0},rangeEndPosition(){return this.modelValue&&2===this.modelValue.length?100*(this.modelValue[1]>this.max?100:this.modelValue[1]-this.min)/(this.max-this.min):100},rangeStartHandleStyle(){return this.horizontal?{left:this.rangeStartPosition+"%"}:{bottom:this.rangeStartPosition+"%"}},rangeEndHandleStyle(){return this.horizontal?{left:this.rangeEndPosition+"%"}:{bottom:this.rangeEndPosition+"%"}}}};const a=["tabindex","aria-valuemin","aria-valuenow","aria-valuemax","aria-labelledby","aria-label","aria-orientation"],n=["tabindex","aria-valuemin","aria-valuenow","aria-valuemax","aria-labelledby","aria-label","aria-orientation"],l=["tabindex","aria-valuemin","aria-valuenow","aria-valuemax","aria-labelledby","aria-label","aria-orientation"];return function(e,t){void 0===t&&(t={});var i=t.insertAt;if(e&&"undefined"!=typeof document){var a=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===i&&a.firstChild?a.insertBefore(n,a.firstChild):a.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}("\n.p-slider {\n    position: relative;\n}\n.p-slider .p-slider-handle {\n    position: absolute;\n    cursor: -webkit-grab;\n    cursor: grab;\n    -ms-touch-action: none;\n        touch-action: none;\n    display: block;\n}\n.p-slider-range {\n    position: absolute;\n    display: block;\n}\n.p-slider-horizontal .p-slider-range {\n    top: 0;\n    left: 0;\n    height: 100%;\n}\n.p-slider-horizontal .p-slider-handle {\n    top: 50%;\n}\n.p-slider-vertical {\n    height: 100px;\n}\n.p-slider-vertical .p-slider-handle {\n    left: 50%;\n}\n.p-slider-vertical .p-slider-range {\n    bottom: 0;\n    left: 0;\n    width: 100%;\n}\n"),i.render=function(e,i,s,o,r,d){return t.openBlock(),t.createElementBlock("div",{class:t.normalizeClass(d.containerClass),onClick:i[15]||(i[15]=(...e)=>d.onBarClick&&d.onBarClick(...e))},[t.createElementVNode("span",{class:"p-slider-range",style:t.normalizeStyle(d.rangeStyle)},null,4),s.range?t.createCommentVNode("",!0):(t.openBlock(),t.createElementBlock("span",{key:0,class:"p-slider-handle",style:t.normalizeStyle(d.handleStyle),onTouchstart:i[0]||(i[0]=e=>d.onDragStart(e)),onTouchmove:i[1]||(i[1]=e=>d.onDrag(e)),onTouchend:i[2]||(i[2]=e=>d.onDragEnd(e)),onMousedown:i[3]||(i[3]=e=>d.onMouseDown(e)),onKeydown:i[4]||(i[4]=e=>d.onKeyDown(e)),tabindex:s.tabindex,role:"slider","aria-valuemin":s.min,"aria-valuenow":s.modelValue,"aria-valuemax":s.max,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-orientation":s.orientation},null,44,a)),s.range?(t.openBlock(),t.createElementBlock("span",{key:1,class:"p-slider-handle",style:t.normalizeStyle(d.rangeStartHandleStyle),onTouchstart:i[5]||(i[5]=e=>d.onDragStart(e,0)),onTouchmove:i[6]||(i[6]=e=>d.onDrag(e)),onTouchend:i[7]||(i[7]=e=>d.onDragEnd(e)),onMousedown:i[8]||(i[8]=e=>d.onMouseDown(e,0)),onKeydown:i[9]||(i[9]=e=>d.onKeyDown(e,0)),tabindex:s.tabindex,role:"slider","aria-valuemin":s.min,"aria-valuenow":s.modelValue?s.modelValue[0]:null,"aria-valuemax":s.max,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-orientation":s.orientation},null,44,n)):t.createCommentVNode("",!0),s.range?(t.openBlock(),t.createElementBlock("span",{key:2,class:"p-slider-handle",style:t.normalizeStyle(d.rangeEndHandleStyle),onTouchstart:i[10]||(i[10]=e=>d.onDragStart(e,1)),onTouchmove:i[11]||(i[11]=e=>d.onDrag(e)),onTouchend:i[12]||(i[12]=e=>d.onDragEnd(e)),onMousedown:i[13]||(i[13]=e=>d.onMouseDown(e,1)),onKeydown:i[14]||(i[14]=e=>d.onKeyDown(e,1)),tabindex:s.tabindex,role:"slider","aria-valuemin":s.min,"aria-valuenow":s.modelValue?s.modelValue[1]:null,"aria-valuemax":s.max,"aria-labelledby":e.ariaLabelledby,"aria-label":e.ariaLabel,"aria-orientation":s.orientation},null,44,l)):t.createCommentVNode("",!0)],2)},i}(primevue.utils,Vue);