@zeit-ui/vue
Version:
A popular UI framework for Vue
2 lines • 5.81 kB
JavaScript
(function(t,e){"object"===typeof exports&&"object"===typeof module?module.exports=e():"function"===typeof define&&define.amd?define([],e):"object"===typeof exports?exports["slider"]=e():t["slider"]=e()})("undefined"!==typeof self?self:this,(function(){return function(t){var e={};function i(n){if(e[n])return e[n].exports;var r=e[n]={i:n,l:!1,exports:{}};return t[n].call(r.exports,r,r.exports,i),r.l=!0,r.exports}return i.m=t,i.c=e,i.d=function(t,e,n){i.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:n})},i.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},i.t=function(t,e){if(1&e&&(t=i(t)),8&e)return t;if(4&e&&"object"===typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(i.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)i.d(n,r,function(e){return t[e]}.bind(null,r));return n},i.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return i.d(e,"a",e),e},i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},i.p="",i(i.s="fb15")}({6825:function(t,e,i){"use strict";var n=i("d5c3"),r=i.n(n);r.a},d5c3:function(t,e,i){},f6fd:function(t,e){(function(t){var e="currentScript",i=t.getElementsByTagName("script");e in t||Object.defineProperty(t,e,{get:function(){try{throw new Error}catch(n){var t,e=(/.*at [^\(]*\((.*):.+:.+\)$/gi.exec(n.stack)||[!1])[1];for(t in i)if(i[t].src==e||"interactive"==i[t].readyState)return i[t];return null}}})})(document)},fb15:function(t,e,i){"use strict";var n;(i.r(e),"undefined"!==typeof window)&&(i("f6fd"),(n=window.document.currentScript)&&(n=n.src.match(/(.+\/)[^/]+\.js(\?.*)?$/))&&(i.p=n[1]));var r=function(){var t=this,e=t.$createElement,i=t._self._c||e;return i("div",{staticClass:"zi-slider",class:t.disabled?"disabled":""},[i("div",{ref:"sliderRail",staticClass:"zi-slider-rail",on:{click:t.onSliderClick}},[i("div",{ref:"sliderHandler",staticClass:"zi-slider-handler",class:t.isClick?"click_animation":"",style:{left:t.sliderMoveStyle+"%"},on:{mousedown:function(e){return e.stopPropagation(),t.handleMouseDown(e)},mouseup:t.onDragEnd,touchstart:function(e){return e.stopPropagation(),t.handleMouseDown(e)},touchend:t.onDragEnd}},[t._v(t._s(t.privateValue))]),t._l(t.dots,(function(e){return t.showStops?i("div",{key:e,staticClass:"zi-slider-dot",style:{left:e+"%"}}):t._e()}))],2)])},s=[],o={name:"zi-slider",props:{step:{type:Number,default:1},value:{type:Number,default:0},showStops:Boolean,disabled:Boolean,max:{type:Number,default:100},min:{type:Number,default:0}},computed:{dots:function(){if(1!==this.step){for(var t=this.max-this.min,e=Math.floor(t/this.step)-1,i=Math.ceil(t/this.step)-1,n=t%this.step?i:e,r=[],s=1;s<=n;s++)r.push(this.step*s*100/t);return r}return[]},privateValue:function(){return this.value>=this.max?this.max:this.value<=this.min?this.min:Number.isInteger(this.value)?this.value:this.value.toFixed(1)},sliderMoveStyle:function(){return 100*(this.privateValue-this.min)/(this.max-this.min)}},data:function(){return{currentX:0,startX:0,startDrag:!1,isClick:!1,railWidth:0}},watch:{max:function(){this.setValue()},min:function(){this.setValue()}},methods:{onSliderClick:function(t){this.disabled||(this.isClick=!0,this.resetSize(),this.startX=this.$refs.sliderRail.getBoundingClientRect().x,this.currentX=t.clientX,this.setValue())},handleMouseDown:function(){this.disabled||(this.isClick=!1,this.startDrag=!0,this.startX=this.$refs.sliderRail.getBoundingClientRect().x,window.addEventListener("mousemove",this.onDragging),window.addEventListener("touchmove",this.onDragging),window.addEventListener("mouseup",this.onDragEnd),window.addEventListener("touchend",this.onDragEnd))},onDragging:function(t){this.startDrag&&(this.currentX=t.clientX,"touchmove"===t.type&&(this.currentX=t.changedTouches[0].clientX),this.resetSize(),this.setValue())},setValue:function(){if(this.max-this.min<1)console.error("[Slider Error]max is at least 1 larger than min");else{var t=this.railWidth/(this.max-this.min)*this.step,e=Math.round((this.currentX-this.startX)/t)*this.step+this.min,i=Number.isInteger(e)?e:Number.parseFloat(e.toFixed(1));this.currentX-this.startX<=0&&(i=this.min),this.currentX-this.startX>=this.railWidth&&(i=this.max),this.$emit("input",i)}},onDragEnd:function(){this.startDrag=!1,window.removeEventListener("mousemove",this.onDragging),window.removeEventListener("mouseup",this.onDragEnd),window.removeEventListener("touchmove",this.onDragging),window.removeEventListener("touchend",this.onDragEnd)},resetSize:function(){this.$refs.sliderRail&&(this.railWidth=this.$refs.sliderRail.clientWidth)}},mounted:function(){this.resetSize(),window.addEventListener("resize",this.resetSize)},beforeDestroy:function(){window.removeEventListener("resize",this.resetSize)}},a=o;i("6825");function u(t,e,i,n,r,s,o,a){var u,d="function"===typeof t?t.options:t;if(e&&(d.render=e,d.staticRenderFns=i,d._compiled=!0),n&&(d.functional=!0),s&&(d._scopeId="data-v-"+s),o?(u=function(t){t=t||this.$vnode&&this.$vnode.ssrContext||this.parent&&this.parent.$vnode&&this.parent.$vnode.ssrContext,t||"undefined"===typeof __VUE_SSR_CONTEXT__||(t=__VUE_SSR_CONTEXT__),r&&r.call(this,t),t&&t._registeredComponents&&t._registeredComponents.add(o)},d._ssrRegister=u):r&&(u=a?function(){r.call(this,this.$root.$options.shadowRoot)}:r),u)if(d.functional){d._injectStyles=u;var l=d.render;d.render=function(t,e){return u.call(e),l(t,e)}}else{var c=d.beforeCreate;d.beforeCreate=c?[].concat(c,u):[u]}return{exports:t,options:d}}var d=u(a,r,s,!1,null,"65568631",null),l=d.exports;l.install=function(t){t.component(l.name,l)};var c=l;e["default"]=c}})["default"]}));
//# sourceMappingURL=slider.umd.min.js.map