mur-slider
Version:
A modern, customizable slider built entirely in Vue.js 3 with TypeScript in under 5KB (gzipped) and dependency free. (horizontal, vertical and circular slider)
2 lines • 24.7 kB
JavaScript
(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("vue")):"function"===typeof define&&define.amd?define([],t):"object"===typeof exports?exports["vue3-slider"]=t(require("vue")):e["vue3-slider"]=t(e["Vue"])})("undefined"!==typeof self?self:this,(function(e){return function(e){var t={};function r(n){if(t[n])return t[n].exports;var o=t[n]={i:n,l:!1,exports:{}};return e[n].call(o.exports,o,o.exports,r),o.l=!0,o.exports}return r.m=e,r.c=t,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)r.d(n,o,function(t){return e[t]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="",r(r.s="fb15")}({"1e6a":function(e,t,r){"use strict";r("fc8f")},"24fb":function(e,t,r){"use strict";function n(e,t){var r=e[1]||"",n=e[3];if(!n)return r;if(t&&"function"===typeof btoa){var i=o(n),l=n.sources.map((function(e){return"/*# sourceURL=".concat(n.sourceRoot||"").concat(e," */")}));return[r].concat(l).concat([i]).join("\n")}return[r].join("\n")}function o(e){var t=btoa(unescape(encodeURIComponent(JSON.stringify(e)))),r="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(t);return"/*# ".concat(r," */")}e.exports=function(e){var t=[];return t.toString=function(){return this.map((function(t){var r=n(t,e);return t[2]?"@media ".concat(t[2]," {").concat(r,"}"):r})).join("")},t.i=function(e,r,n){"string"===typeof e&&(e=[[null,e,""]]);var o={};if(n)for(var i=0;i<this.length;i++){var l=this[i][0];null!=l&&(o[l]=!0)}for(var a=0;a<e.length;a++){var c=[].concat(e[a]);n&&o[c[0]]||(r&&(c[2]?c[2]="".concat(r," and ").concat(c[2]):c[2]=r),t.push(c))}},t}},"2d38":function(e,t,r){var n=r("24fb");t=n(!1),t.push([e.i,".fade-enter-active,.fade-leave-active{transition:opacity .2s}.fade-enter,.fade-leave-to{opacity:0}.vue3-slider{box-sizing:border-box;width:var(--width,100%);height:var(--height,6px);position:relative;margin:3px 0;cursor:pointer;font-family:inherit}.vue3-slider.vertical{width:var(--height,6px);height:var(--width,100%)}.vue3-slider.vertical .track-filled{width:100%;bottom:0;top:auto}.vue3-slider.vertical .handle{top:unset;bottom:0;left:0}.vue3-slider.vertical .tooltip{bottom:0;top:auto}.vue3-slider.circular{height:var(--width,100%);margin:0}.vue3-slider.circular .round-end{position:absolute;margin:0 auto;width:var(--height,6px);height:var(--height,6px);transform:scale(1);left:0;right:0;top:calc(var(--height, 6px)*-0.5)}.vue3-slider.circular .handle-container{-webkit-user-select:none;-ms-user-select:none;user-select:none;width:100%;height:100%;position:absolute;top:0;left:0;transform-origin:center;display:flex;justify-content:center;align-items:center}.vue3-slider.circular .handle-container .handle{top:calc(var(--height, 6px)*-0.5);width:var(--height,6px);height:var(--height,6px);transform:scale(1)}.vue3-slider.circular .handle-container .handle.hover{transform:scale(1.5)}.vue3-slider.circular .handle-container .tooltip{position:absolute;bottom:auto;left:unset}.vue3-slider *{-webkit-user-drag:none;-webkit-app-region:no-drag}.vue3-slider .tooltip{position:absolute;left:0;height:25px;background-color:var(--tooltip-color);color:var(--tooltip-text-color);font-family:inherit;padding:3px 7px;border-radius:4px;font-weight:700;display:flex;align-items:center}.vue3-slider .track,.vue3-slider .track-filled{background-color:var(--track-color,rgba(241,246,248,.156863));width:100%;height:100%;border-radius:calc(var(--height, 6px)/2)}.vue3-slider .track-filled{left:0;width:auto;opacity:1}.vue3-slider .handle,.vue3-slider .track-filled{position:absolute;top:0;background-color:var(--color,#fb2727)}.vue3-slider .handle{width:var(--height,6px);height:var(--height,6px);border-radius:calc(var(--height, 6px)/2);transform:scale(0);transition:transform .2s ease;-webkit-user-select:none;-ms-user-select:none;user-select:none}.vue3-slider .handle.hover{transform:scale(1.35)}",""]),e.exports=t},"499e":function(e,t,r){"use strict";function n(e,t){for(var r=[],n={},o=0;o<t.length;o++){var i=t[o],l=i[0],a=i[1],c=i[2],u=i[3],d={id:e+":"+o,css:a,media:c,sourceMap:u};n[l]?n[l].parts.push(d):r.push(n[l]={id:l,parts:[d]})}return r}r.r(t),r.d(t,"default",(function(){return v}));var o="undefined"!==typeof document;if("undefined"!==typeof DEBUG&&DEBUG&&!o)throw new Error("vue-style-loader cannot be used in a non-browser environment. Use { target: 'node' } in your Webpack config to indicate a server-rendering environment.");var i={},l=o&&(document.head||document.getElementsByTagName("head")[0]),a=null,c=0,u=!1,d=function(){},s=null,f="data-vue-ssr-id",p="undefined"!==typeof navigator&&/msie [6-9]\b/.test(navigator.userAgent.toLowerCase());function v(e,t,r,o){u=r,s=o||{};var l=n(e,t);return h(l),function(t){for(var r=[],o=0;o<l.length;o++){var a=l[o],c=i[a.id];c.refs--,r.push(c)}t?(l=n(e,t),h(l)):l=[];for(o=0;o<r.length;o++){c=r[o];if(0===c.refs){for(var u=0;u<c.parts.length;u++)c.parts[u]();delete i[c.id]}}}}function h(e){for(var t=0;t<e.length;t++){var r=e[t],n=i[r.id];if(n){n.refs++;for(var o=0;o<n.parts.length;o++)n.parts[o](r.parts[o]);for(;o<r.parts.length;o++)n.parts.push(g(r.parts[o]));n.parts.length>r.parts.length&&(n.parts.length=r.parts.length)}else{var l=[];for(o=0;o<r.parts.length;o++)l.push(g(r.parts[o]));i[r.id]={id:r.id,refs:1,parts:l}}}}function m(){var e=document.createElement("style");return e.type="text/css",l.appendChild(e),e}function g(e){var t,r,n=document.querySelector("style["+f+'~="'+e.id+'"]');if(n){if(u)return d;n.parentNode.removeChild(n)}if(p){var o=c++;n=a||(a=m()),t=y.bind(null,n,o,!1),r=y.bind(null,n,o,!0)}else n=m(),t=O.bind(null,n),r=function(){n.parentNode.removeChild(n)};return t(e),function(n){if(n){if(n.css===e.css&&n.media===e.media&&n.sourceMap===e.sourceMap)return;t(e=n)}else r()}}var b=function(){var e=[];return function(t,r){return e[t]=r,e.filter(Boolean).join("\n")}}();function y(e,t,r,n){var o=r?"":n.css;if(e.styleSheet)e.styleSheet.cssText=b(t,o);else{var i=document.createTextNode(o),l=e.childNodes;l[t]&&e.removeChild(l[t]),l.length?e.insertBefore(i,l[t]):e.appendChild(i)}}function O(e,t){var r=t.css,n=t.media,o=t.sourceMap;if(n&&e.setAttribute("media",n),s.ssrId&&e.setAttribute(f,t.id),o&&(r+="\n/*# sourceURL="+o.sources[0]+" */",r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */"),e.styleSheet)e.styleSheet.cssText=r;else{while(e.firstChild)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}},"6b0d":function(e,t,r){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default=(e,t)=>{for(const[r,n]of t)e[r]=n;return e}},8875:function(e,t,r){var n,o,i;(function(r,l){o=[],n=l,i="function"===typeof n?n.apply(t,o):n,void 0===i||(e.exports=i)})("undefined"!==typeof self&&self,(function(){function e(){var t=Object.getOwnPropertyDescriptor(document,"currentScript");if(!t&&"currentScript"in document&&document.currentScript)return document.currentScript;if(t&&t.get!==e&&document.currentScript)return document.currentScript;try{throw new Error}catch(p){var r,n,o,i=/.*at [^(]*\((.*):(.+):(.+)\)$/gi,l=/@([^@]*):(\d+):(\d+)\s*$/gi,a=i.exec(p.stack)||l.exec(p.stack),c=a&&a[1]||!1,u=a&&a[2]||!1,d=document.location.href.replace(document.location.hash,""),s=document.getElementsByTagName("script");c===d&&(r=document.documentElement.outerHTML,n=new RegExp("(?:[^\\n]+?\\n){0,"+(u-2)+"}[^<]*<script>([\\d\\D]*?)<\\/script>[\\d\\D]*","i"),o=r.replace(n,"$1").trim());for(var f=0;f<s.length;f++){if("interactive"===s[f].readyState)return s[f];if(s[f].src===c)return s[f];if(c===d&&s[f].innerHTML&&s[f].innerHTML.trim()===o)return s[f]}return null}}return e}))},"8bbf":function(t,r){t.exports=e},fb15:function(e,t,r){"use strict";r.r(t);var n={};if(r.r(n),r.d(n,"default",(function(){return R})),"undefined"!==typeof window){var o=window.document.currentScript,i=r("8875");o=i(),"currentScript"in document||Object.defineProperty(document,"currentScript",{get:i});var l=o&&o.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);l&&(r.p=l[1])}var a=r("8bbf");function c(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function u(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?c(Object(r),!0).forEach((function(t){d(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function d(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}var s=Object(a["createElementVNode"])("div",{class:"track"},null,-1),f=Object(a["createElementVNode"])("div",{class:"track"},null,-1),p={width:"100%",height:"100%",viewBox:"0 0 100 100",style:{overflow:"visible"}},v=Object(a["createElementVNode"])("circle",{stroke:"var(--track-color)","vector-effect":"non-scaling-stroke",fill:"none","stroke-width":"var(--height)",r:"50%",cx:"50",cy:"50"},null,-1),h=["stroke-dasharray","stroke-dashoffset"],m=Object(a["createElementVNode"])("div",{class:"handle round-end"},null,-1),g=[m];function b(e,t,r,n,o,i){return"horizontal"==e.orientation?(Object(a["openBlock"])(),Object(a["createElementBlock"])("div",{key:"horizontal",style:Object(a["normalizeStyle"])(u({},e.vars)),class:"vue3-slider",tabindex:"0",ref:"slider",onTouchstart:t[0]||(t[0]=function(){return e.clickHandler&&e.clickHandler.apply(e,arguments)}),onMousedown:t[1]||(t[1]=function(){return e.clickHandler&&e.clickHandler.apply(e,arguments)}),onMouseenter:t[2]||(t[2]=function(t){return e.hovering=!0}),onMouseleave:t[3]||(t[3]=function(t){return e.hovering=!1}),onKeydown:t[4]||(t[4]=function(){return e.handleKeydown&&e.handleKeydown.apply(e,arguments)})},[Object(a["createVNode"])(a["Transition"],{name:"fade"},{default:Object(a["withCtx"])((function(){return[Object(a["withDirectives"])(Object(a["createElementVNode"])("div",{class:"tooltip",ref:"tooltip",style:Object(a["normalizeStyle"])({transform:e.flip?"translate(".concat(-e.tooltipOffset,"px)"):"translate(".concat(e.tooltipOffset,"px)"),right:e.flip?"0px":void 0,left:e.flip?"auto":void 0,bottom:"max(calc(var(--height, 6px) + 12px), calc(var(--height, 6px) * 1.35))"})},Object(a["toDisplayString"])(e.tooltipText),5),[[a["vShow"],e.showTooltip&&(e.hovering||e.holding)]])]})),_:1}),s,Object(a["createElementVNode"])("div",{class:"track-filled",style:Object(a["normalizeStyle"])({width:e.filledWidth+"px",right:e.flip?"0px":void 0,left:e.flip?"auto":void 0})},null,4),Object(a["createElementVNode"])("div",{class:Object(a["normalizeClass"])(["handle",{hover:e.applyHandleHoverClass}]),style:Object(a["normalizeStyle"])(d({},e.flip?"right":"left",e.filledWidth-1.35*e.height/2+"px"))},null,6)],36)):"vertical"==e.orientation?(Object(a["openBlock"])(),Object(a["createElementBlock"])("div",{key:"vertical",style:Object(a["normalizeStyle"])(u({},e.vars)),class:"vue3-slider vertical",tabindex:"0",ref:"slider",onTouchstart:t[5]||(t[5]=function(){return e.clickHandler&&e.clickHandler.apply(e,arguments)}),onMousedown:t[6]||(t[6]=function(){return e.clickHandler&&e.clickHandler.apply(e,arguments)}),onMouseenter:t[7]||(t[7]=function(t){return e.hovering=!0}),onMouseleave:t[8]||(t[8]=function(t){return e.hovering=!1}),onKeydown:t[9]||(t[9]=function(){return e.handleKeydown&&e.handleKeydown.apply(e,arguments)})},[Object(a["createVNode"])(a["Transition"],{name:"fade"},{default:Object(a["withCtx"])((function(){return[Object(a["withDirectives"])(Object(a["createElementVNode"])("div",{class:"tooltip",ref:"tooltip",style:Object(a["normalizeStyle"])({transform:e.flip?"translateY(".concat(e.tooltipOffset,"px)"):"translateY(".concat(-e.tooltipOffset,"px)"),top:e.flip?"0px":void 0,bottom:e.flip?"auto":void 0,left:"max(calc(var(--height, 6px) + 14px), calc(var(--height, 6px) * 1.35))"})},Object(a["toDisplayString"])(e.tooltipText),5),[[a["vShow"],e.showTooltip&&(e.hovering||e.holding)]])]})),_:1}),f,Object(a["createElementVNode"])("div",{class:"track-filled",style:Object(a["normalizeStyle"])({height:e.filledWidth+"px",top:e.flip?"0px":void 0,bottom:e.flip?"auto":void 0})},null,4),Object(a["createElementVNode"])("div",{class:Object(a["normalizeClass"])(["handle",{hover:e.applyHandleHoverClass}]),style:Object(a["normalizeStyle"])(d({},e.flip?"top":"bottom",e.filledWidth-1.35*e.height/2+"px"))},null,6)],36)):(Object(a["openBlock"])(),Object(a["createElementBlock"])("div",{key:"circular",class:"vue3-slider circular",tabindex:"0",ref:"slider",style:Object(a["normalizeStyle"])(u({},e.vars)),onTouchstart:t[10]||(t[10]=function(){return e.clickHandler&&e.clickHandler.apply(e,arguments)}),onMousedown:t[11]||(t[11]=function(){return e.clickHandler&&e.clickHandler.apply(e,arguments)}),onMouseenter:t[12]||(t[12]=function(t){return e.hovering=!0}),onMouseleave:t[13]||(t[13]=function(t){return e.hovering=!1}),onKeydown:t[14]||(t[14]=function(){return e.handleKeydown&&e.handleKeydown.apply(e,arguments)})},[(Object(a["openBlock"])(),Object(a["createElementBlock"])("svg",p,[v,Object(a["createElementVNode"])("circle",{style:Object(a["normalizeStyle"])([{transform:"rotate(".concat(-90+e.circleOffset,"deg) ").concat(e.flip?"scaleY(-1)":"")},{"transform-origin":"center"}]),stroke:"var(--color)","vector-effect":"non-scaling-stroke",fill:"none","stroke-width":"var(--height)",r:"50%",cx:"50",cy:"50","stroke-dasharray":e.circumference,"stroke-dashoffset":e.strokeOffset},null,12,h)])),Object(a["createElementVNode"])("div",{class:"handle-container",style:Object(a["normalizeStyle"])({transform:"rotate(".concat(e.circleOffset,"deg)")})},g,4),Object(a["createElementVNode"])("div",{class:"handle-container",style:Object(a["normalizeStyle"])({transform:"rotate(".concat(e.sliderValueDegrees+e.circleOffset,"deg)")})},[Object(a["createElementVNode"])("div",{class:Object(a["normalizeClass"])(["handle",{hover:e.applyHandleHoverClass}])},null,2),Object(a["createVNode"])(a["Transition"],{name:"fade"},{default:Object(a["withCtx"])((function(){return[Object(a["withDirectives"])(Object(a["createElementVNode"])("div",{class:"tooltip",ref:"tooltip",style:Object(a["normalizeStyle"])({transform:"rotate(".concat(-e.sliderValueDegrees-e.circleOffset,"deg)"),top:"calc(max(calc(".concat(e.tooltipOffset,"px + 34px), calc(").concat(e.tooltipOffset,"px + var(--height) * 1.3)) * -1)")})},Object(a["toDisplayString"])(e.tooltipText),5),[[a["vShow"],e.showTooltip&&(e.hovering||e.holding)]])]})),_:1})],4)],36))}var y=/(\d*\.?\d+)\s?(cm|mm|in|px|pt|pc|em|ex|ch|rem|vw|vh|vmin|vmax|%+)/i,O=function(e){var t=e.match(y);return null!==t&&t.length<=3},w={width:{type:String,default:"100%",validator:O},height:{type:Number,default:6},color:{type:String,default:"#FB2727"},trackColor:{type:String,default:"#f1f6f828"},max:{type:Number,default:100},min:{type:Number,default:0},limit:{type:Number,default:100},step:{type:Number,default:1,validator:function(e){return 0!==e||(console.error("[Vue3Slider] Error: Step cannot be 0"),!1)}},tooltip:{type:Boolean,default:!1},tooltipText:{type:String,default:"%v",validator:function(e){return!!e.includes("%v")||(console.error("[Vue3Slider] Error: tooltip text must contain %v"),!1)}},tooltipColor:{type:String,default:"#FFFFFF"},tooltipTextColor:{type:String,default:"#000000"},formatTooltip:{validator:function(e){return"function"!==typeof e?(console.error("[Vue3Slider] Error: formatTooltip must be a function"),!1):"string"===typeof e(0)||(console.error("[Vue3Slider] Error: formatTooltip must return a string"),!1)}},orientation:{type:String,default:"horizontal",validator:function(e){return"horizontal"===e||"vertical"===e||"circular"===e}},modelValue:{type:Number,default:0,required:!0},repeat:{type:Boolean,default:!1},sticky:{type:Boolean,default:!1},flip:{type:Boolean,default:!1},circleOffset:{type:Number,default:0,validator:function(e){return e>=0&&e<=360}}};function j(e){var t=Object(a["ref"])(document.createElement("div")),r=Object(a["ref"])(e.modelValue);0!==e.min&&(r.value-=e.min);var n=Object(a["ref"])(0),o=Object(a["ref"])(0),i=Object(a["ref"])(0),l=Object(a["ref"])(1),c=Object(a["computed"])((function(){var t=0;return t=e.min<0?e.max+Math.abs(e.min):e.max-e.min,t})),u=Object(a["computed"])((function(){if("circular"!==e.orientation)return 0;var t=r.value/(c.value/360);return e.flip?-t:t})),d=Object(a["ref"])(!1),s={slider:t,modelValueUnrounded:r,formattedSliderValue:n,filledWidth:i,pixelsPerStep:l,sliderRange:c,sliderValueDegrees:u,sliderWidth:o,holding:d};return s}function x(e,t){Object(a["watchEffect"])((function(){e.filledWidth.value=S(e,t)}));var r=new ResizeObserver((function(n){e.filledWidth.value=S(e,t),e.sliderWidth.value=e.slider.value?"vertical"===t.orientation?e.slider.value.clientHeight:e.slider.value.clientWidth:0,e.slider.value!==n[0].target&&e.slider.value instanceof Element&&(r.unobserve(n[0].target),r.observe(e.slider.value))}));e.slider.value&&r.observe(e.slider.value)}function S(e,t){var r=e.slider;if(!r.value)return 0;var n="vertical"===t.orientation?r.value.clientHeight:r.value.clientWidth;e.pixelsPerStep.value=n/e.sliderRange.value;var o=Math.max(Math.min(e.modelValueUnrounded.value*e.pixelsPerStep.value,n),0);return o}function k(e,t){var r=new ResizeObserver((function(n){e.value&&(t.value=e.value.clientWidth,e.value!==n[0].target&&(r.unobserve(n[0].target),e.value&&r.observe(e.value)))}));e.value&&r.observe(e.value)}var V=function(e,t,r){var n=function(t){var n=e.modelValueUnrounded.value+t;n<=0?r(0):n>=e.sliderRange.value?r(e.sliderRange.value):r(n)},o=function(e){switch(e.key){case"ArrowRight":case"ArrowUp":n(t.step);break;case"ArrowLeft":case"ArrowDown":n(-t.step);break;default:break}};return{handleKeydown:o}},E=function(e,t,r){var n=Object(a["ref"])(t.modelValue);Object(a["watchEffect"])((function(){return n.value=t.modelValue})),Object(a["watch"])(n,(function(r){if(e.formattedSliderValue.value!==r){var n=0;n=t.min<0?r+Math.abs(t.min):r-t.min,n>e.sliderRange.value&&(n=e.sliderRange.value),i(n)}}));var o=function(e){var r=t.step,n=0;return n=e>0?Math.round(e/r)*r:0,n+t.min},i=function(n){e.formattedSliderValue.value=o(n),t.sticky?e.modelValueUnrounded.value=e.formattedSliderValue.value-t.min:e.modelValueUnrounded.value=n,r("update:modelValue",e.formattedSliderValue.value),r("change",e.formattedSliderValue.value)};return{formatModelValue:o,updateModelValue:i,modelValueRef:n}},M=function(e,t,r,n){var o=e.formattedSliderValue.value,i=function(r,n,i){var l=e.slider.value.getBoundingClientRect(),a=0;if("horizontal"===t.orientation)a=(r-l.x)/e.pixelsPerStep.value,t.flip&&(a=e.sliderRange.value-a);else if("vertical"===t.orientation)a=(l.y+l.height-n)/e.pixelsPerStep.value,t.flip&&(a=e.sliderRange.value-a);else{var c=r-l.x,u=n-l.y,d=l.width/2,s=l.height/2,f=(u-s)/(c-d),p=180*Math.atan(f)/Math.PI;c>=d?u<s?p=180===Math.ceil(p)?0:90-Math.abs(p):p+=90:p=270+p;var v=e.sliderRange.value/360;if(a=p*v-t.circleOffset*v,a<0&&(a+=e.sliderRange.value),t.flip&&(a=e.sliderRange.value-a),!t.repeat&&i){var h=Math.abs(a-o);h>30*v&&(a=o)}}return a=Math.min(e.sliderRange.value,Math.max(a,0)),o=a,a>t.limit?t.limit:a},l=function(o){var l;if("mousemove"===o.type)o=o,l=o;else{if(o=o,o.touches.length>1)return;l=o.touches[0]}if(e.holding.value){var a=e.slider.value.getBoundingClientRect(),c="vertical"===t.orientation?a.y+a.height-l.pageY:l.pageX-a.x;c=Math.min(e.sliderWidth.value,Math.max(c,0)),n(i(l.pageX-window.scrollX,l.pageY-window.scrollY,!0)),r("dragging",e.formattedSliderValue.value,l)}},a=function t(n){e.holding.value&&(e.holding.value=!1),"mouseup"===n.type?(window.removeEventListener("mouseup",t),window.removeEventListener("mousemove",l)):(window.removeEventListener("touchend",t),window.removeEventListener("touchmove",l)),r("drag-end",e.formattedSliderValue.value,n)},c=function(t){if(t.preventDefault(),e.holding.value=!0,r("drag-start",e.formattedSliderValue.value,t),"touchstart"===t.type){if(t=t,t.touches.length>1)return;var o=t.touches[0];n(i(o.pageX-window.scrollX,o.pageY-window.scrollY,!1)),window.addEventListener("touchend",a),window.addEventListener("touchmove",l)}else t=t,n(i(t.pageX-window.scrollX,t.pageY-window.scrollY,!1)),window.addEventListener("mouseup",a),window.addEventListener("mousemove",l)};return{clickHandler:c}},T=Object(a["defineComponent"])({name:"vue3-slider",props:w,setup:function(e,t){var r=t.emit;(e.modelValue<e.min||e.modelValue>e.max)&&console.error("[Vue3Slider] Error: value exceeds limits of slider"),e.max<=e.min&&console.error("[Vue3Slider] Error: Max value cannot be less than or equal to the min value. This will cause unexpected errors to occur, please fix.");var n=j(e),o=E(n,e,r),i=o.updateModelValue,l=o.formatModelValue,c=V(n,e,i),u=c.handleKeydown,d=M(n,e,r,i),s=d.clickHandler,f=Object(a["ref"])(!1),p=Object(a["computed"])((function(){return!!n.holding.value||f.value})),v=Object(a["ref"])(),h=Object(a["computed"])((function(){if(!e.tooltip)return"";var t="";return t=null!==e.formatTooltip&&"function"===typeof e.formatTooltip?e.formatTooltip(n.formattedSliderValue.value||l(n.modelValueUnrounded.value)):(n.formattedSliderValue.value||l(n.modelValueUnrounded.value)).toString(),e.tooltipText.replace("%v",t)})),m=Object(a["ref"])(0),g=Object(a["computed"])((function(){if(!e.tooltip)return 0;var t,r=m.value;if("horizontal"!==e.orientation){if(r=null===(t=v.value)||void 0===t?void 0:t.clientHeight,r||(r=20),"vertical"!==e.orientation)return r}else r?r+=e.height/3:r=14+9*n.formattedSliderValue.value.toString().length;return n.filledWidth.value-r/2})),b=Object(a["computed"])((function(){return n.slider.value&&"circular"===e.orientation?2*Math.PI*(n.sliderWidth.value/2):1})),y=Object(a["computed"])((function(){return"circular"!==e.orientation?0:(n.sliderRange.value-n.modelValueUnrounded.value)/n.sliderRange.value*b.value})),O=Object(a["computed"])((function(){return{"--width":e.width,"--height":e.height+"px","--color":e.color,"--track-color":e.trackColor,"--tooltip-color":e.tooltipColor,"--tooltip-text-color":e.tooltipTextColor}}));return Object(a["onMounted"])((function(){x(n,e),k(v,m)})),{filledWidth:n.filledWidth,slider:n.slider,holding:n.holding,flip:Object(a["computed"])((function(){return e.flip})),clickHandler:s,handleKeydown:u,applyHandleHoverClass:p,hovering:f,showTooltip:Object(a["computed"])((function(){return e.tooltip})),tooltip:v,tooltipText:h,tooltipOffset:g,vars:O,circumference:b,strokeOffset:y,circleOffset:Object(a["computed"])((function(){return e.circleOffset})),sliderValueDegrees:n.sliderValueDegrees}}}),N=(r("1e6a"),r("6b0d")),C=r.n(N),H=C()(T,[["render",b]]),R=function(){var e=H;return e.install=function(t){t.component("Vue3Slider",e)},e}();function z(e,t){return W(e)||U(e,t)||B(e,t)||P()}function P(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}function B(e,t){if(e){if("string"===typeof e)return D(e,t);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?D(e,t):void 0}}function D(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}function U(e,t){var r=null==e?null:"undefined"!==typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,i=[],l=!0,a=!1;try{for(r=r.call(e);!(l=(n=r.next()).done);l=!0)if(i.push(n.value),t&&i.length===t)break}catch(c){a=!0,o=c}finally{try{l||null==r["return"]||r["return"]()}finally{if(a)throw o}}return i}}function W(e){if(Array.isArray(e))return e}Object.entries(n).forEach((function(e){var t=z(e,2),r=t[0],n=t[1];"default"!==r&&(R[r]=n)}));var L=R;t["default"]=L},fc8f:function(e,t,r){var n=r("2d38");n.__esModule&&(n=n.default),"string"===typeof n&&(n=[[e.i,n,""]]),n.locals&&(e.exports=n.locals);var o=r("499e").default;o("4c7b1627",n,!0,{sourceMap:!1,shadowMode:!1})}})}));
//# sourceMappingURL=vue3-slider.umd.min.js.map