vue-slider-component - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

dist/index.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("vue-slider-component",[],t):"object"==typeof exports?exports["vue-slider-component"]=t():e["vue-slider-component"]=t()}(this,function(){return function(e){function t(s){if(i[s])return i[s].exports;var r=i[s]={exports:{},id:s,loaded:!1};return e[s].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t,i){"use strict";function s(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var r=i(1),o=s(r);t["default"]=o["default"]},function(e,t,i){var s,r,o={};i(2),s=i(6),r=i(7),e.exports=s||{},e.exports.__esModule&&(e.exports=e.exports["default"]);var n="function"==typeof e.exports?e.exports.options||(e.exports.options={}):e.exports;r&&(n.template=r),n.computed||(n.computed={}),Object.keys(o).forEach(function(e){var t=o[e];n.computed[e]=function(){return t}})},function(e,t,i){var s=i(3);"string"==typeof s&&(s=[[e.id,s,""]]);i(5)(s,{});s.locals&&(e.exports=s.locals)},function(e,t,i){t=e.exports=i(4)(),t.push([e.id,".vue-slider-wrap[_v-29912c8e]{position:relative;display:block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vue-slider-wrap.vue-slider-disabled[_v-29912c8e]{opacity:.5;cursor:not-allowed}.vue-slider-wrap.vue-slider-disabled .vue-slider-dot[_v-29912c8e]{cursor:not-allowed}.vue-slider-wrap .vue-slider[_v-29912c8e]{position:relative;display:block;border-radius:15px;background-color:#ccc}.vue-slider-process[_v-29912c8e]{position:absolute;border-radius:15px;background-color:#3498db;-webkit-transition:all 0s;transition:all 0s;z-index:1}.vue-slider-horizontal .vue-slider-process[_v-29912c8e]{width:0;height:100%;top:0;left:0}.vue-slider-vertical .vue-slider-process[_v-29912c8e]{width:100%;height:0;bottom:0;left:0}.vue-slider-horizontal-reverse .vue-slider-process[_v-29912c8e]{width:0;height:100%;top:0;right:0}.vue-slider-vertical-reverse .vue-slider-process[_v-29912c8e]{width:100%;height:0;top:0;left:0}.vue-slider-dot[_v-29912c8e]{position:absolute;border-radius:50%;background-color:#fff;box-shadow:.5px .5px 2px 1px rgba(0,0,0,.32);-webkit-transition:all 0s;transition:all 0s;cursor:pointer;z-index:3}.vue-slider-horizontal .vue-slider-dot[_v-29912c8e]{left:0}.vue-slider-vertical .vue-slider-dot[_v-29912c8e]{bottom:0}.vue-slider-horizontal-reverse .vue-slider-dot[_v-29912c8e]{right:0}.vue-slider-vertical-reverse .vue-slider-dot[_v-29912c8e]{top:0}.vue-slider-dot[_v-29912c8e]:after{content:attr(data-rangevalue);display:none;font-size:14px;white-space:nowrap;position:absolute;padding:2px 5px;color:#fff;border-radius:5px;background-color:#3498db;z-index:9}.vue-slider-dot.vue-slider-tooltip-top[_v-29912c8e]:after{top:0;left:50%;-webkit-transform:translate(-50%,calc(-100% - 10px));transform:translate(-50%,calc(-100% - 10px))}.vue-slider-dot.vue-slider-tooltip-bottom[_v-29912c8e]:after{top:100%;left:50%;-webkit-transform:translate(-50%,10px);transform:translate(-50%,10px)}.vue-slider-dot.vue-slider-tooltip-left[_v-29912c8e]:after{top:50%;left:0;-webkit-transform:translate(calc(-100% - 10px),-50%);transform:translate(calc(-100% - 10px),-50%)}.vue-slider-dot.vue-slider-tooltip-right[_v-29912c8e]:after{top:50%;left:100%;-webkit-transform:translate(10px,-50%);transform:translate(10px,-50%)}.vue-slider-dot.vue-slider-tooltip-top[_v-29912c8e]:before{top:-10px;border:5px solid transparent;border-top-color:#3498db}.vue-slider-dot.vue-slider-tooltip-bottom[_v-29912c8e]:before,.vue-slider-dot.vue-slider-tooltip-top[_v-29912c8e]:before{content:'';display:none;position:absolute;left:50%;width:0;height:0;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.vue-slider-dot.vue-slider-tooltip-bottom[_v-29912c8e]:before{top:100%;border:5px solid transparent;border-bottom-color:#3498db}.vue-slider-dot.vue-slider-tooltip-left[_v-29912c8e]:before{left:-10px;border:5px solid transparent;border-left-color:#3498db}.vue-slider-dot.vue-slider-tooltip-left[_v-29912c8e]:before,.vue-slider-dot.vue-slider-tooltip-right[_v-29912c8e]:before{content:'';display:none;position:absolute;top:50%;width:0;height:0;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.vue-slider-dot.vue-slider-tooltip-right[_v-29912c8e]:before{left:100%;border:5px solid transparent;border-right-color:#3498db}.vue-slider-dot.vue-slider-hover[_v-29912c8e]:hover:after,.vue-slider-dot.vue-slider-hover[_v-29912c8e]:hover:before{display:block}.vue-slider-dot.vue-slider-always[_v-29912c8e]:after,.vue-slider-dot.vue-slider-always[_v-29912c8e]:before{display:block!important}.vue-slider-piecewise[_v-29912c8e]{list-style:none}.vue-slider-piecewise li[_v-29912c8e]{position:absolute;background-color:rgba(0,0,0,.16);border-radius:50%;z-index:2}.vue-slider-horizontal .vue-slider-piecewise li[_v-29912c8e]{top:0}.vue-slider-vertical .vue-slider-piecewise li[_v-29912c8e]{left:0}",""])},function(e,t){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;t<this.length;t++){var i=this[t];i[2]?e.push("@media "+i[2]+"{"+i[1]+"}"):e.push(i[1])}return e.join("")},e.i=function(t,i){"string"==typeof t&&(t=[[null,t,""]]);for(var s={},r=0;r<this.length;r++){var o=this[r][0];"number"==typeof o&&(s[o]=!0)}for(r=0;r<t.length;r++){var n=t[r];"number"==typeof n[0]&&s[n[0]]||(i&&!n[2]?n[2]=i:i&&(n[2]="("+n[2]+") and ("+i+")"),e.push(n))}},e}},function(e,t,i){function s(e,t){for(var i=0;i<e.length;i++){var s=e[i],r=h[s.id];if(r){r.refs++;for(var o=0;o<r.parts.length;o++)r.parts[o](s.parts[o]);for(;o<s.parts.length;o++)r.parts.push(a(s.parts[o],t))}else{for(var n=[],o=0;o<s.parts.length;o++)n.push(a(s.parts[o],t));h[s.id]={id:s.id,refs:1,parts:n}}}}function r(e){for(var t=[],i={},s=0;s<e.length;s++){var r=e[s],o=r[0],n=r[1],l=r[2],a=r[3],u={css:n,media:l,sourceMap:a};i[o]?i[o].parts.push(u):t.push(i[o]={id:o,parts:[u]})}return t}function o(e,t){var i=v(),s=g[g.length-1];if("top"===e.insertAt)s?s.nextSibling?i.insertBefore(t,s.nextSibling):i.appendChild(t):i.insertBefore(t,i.firstChild),g.push(t);else{if("bottom"!==e.insertAt)throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");i.appendChild(t)}}function n(e){e.parentNode.removeChild(e);var t=g.indexOf(e);t>=0&&g.splice(t,1)}function l(e){var t=document.createElement("style");return t.type="text/css",o(e,t),t}function a(e,t){var i,s,r;if(t.singleton){var o=m++;i=f||(f=l(t)),s=u.bind(null,i,o,!1),r=u.bind(null,i,o,!0)}else i=l(t),s=d.bind(null,i),r=function(){n(i)};return s(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;s(e=t)}else r()}}function u(e,t,i,s){var r=i?"":s.css;if(e.styleSheet)e.styleSheet.cssText=b(t,r);else{var o=document.createTextNode(r),n=e.childNodes;n[t]&&e.removeChild(n[t]),n.length?e.insertBefore(o,n[t]):e.appendChild(o)}}function d(e,t){var i=t.css,s=t.media,r=t.sourceMap;if(s&&e.setAttribute("media",s),r&&(i+="\n/*# sourceURL="+r.sources[0]+" */",i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */"),e.styleSheet)e.styleSheet.cssText=i;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(i))}}var h={},c=function(e){var t;return function(){return"undefined"==typeof t&&(t=e.apply(this,arguments)),t}},p=c(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),v=c(function(){return document.head||document.getElementsByTagName("head")[0]}),f=null,m=0,g=[];e.exports=function(e,t){t=t||{},"undefined"==typeof t.singleton&&(t.singleton=p()),"undefined"==typeof t.insertAt&&(t.insertAt="bottom");var i=r(e);return s(i,t),function(e){for(var o=[],n=0;n<i.length;n++){var l=i[n],a=h[l.id];a.refs--,o.push(a)}if(e){var u=r(e);s(u,t)}for(var n=0;n<o.length;n++){var a=o[n];if(0===a.refs){for(var d=0;d<a.parts.length;d++)a.parts[d]();delete h[a.id]}}}};var b=function(){var e=[];return function(t,i){return e[t]=i,e.filter(Boolean).join("\n")}}()},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t["default"]={data:function(){return{flag:!1,size:0,currentValue:0,currentSlider:0}},props:{className:String,styles:Object,width:{type:[Number,String],"default":"auto"},height:{type:[Number,String],"default":4},data:{type:Array,"default":null},dotSize:{type:Number,"default":16},min:{type:Number,"default":0},max:{type:Number,"default":100},interval:{type:Number,"default":1},show:{type:Boolean,"default":!0},disabled:{type:Boolean,"default":!1},piecewise:{type:Boolean,"default":!1},tooltip:{type:[String,Boolean],"default":"always"},eventType:{type:String,"default":"auto"},direction:{type:String,"default":"horizontal"},tooltipDir:{type:String},reverse:{type:Boolean,"default":!1},speed:{type:Number,"default":.5},val:{type:[String,Number,Array],"default":0}},computed:{flowDirection:function(){return"vue-slider-"+(this.direction+(this.reverse?"-reverse":""))},tooltipDirection:function(){return this.tooltipDir||("vertical"===this.direction?"left":"top")},tooltipStatus:function(){return"hover"===this.tooltip&&this.flag?"vue-slider-always":this.tooltip?"vue-slider-"+this.tooltip:""},isMoblie:function(){return"touch"===this.eventType||"mouse"!==this.eventType&&/(iPhone|iPad|iPod|iOS|Android|SymbianOS|Windows Phone|Mobile)/i.test(navigator.userAgent)},isDisabled:function(){return"none"===this.eventType||this.disabled},disabledClass:function(){return this.disabled?"vue-slider-disabled":""},isRange:function(){return Array.isArray(this.val)},slider:function(){return this.isRange?[this.$refs.dot0,this.$refs.dot1]:this.$refs.dot},minimum:function(){return this.data?0:this.min},value:{get:function(){return this.data?this.isRange?[this.data[this.currentValue[0]],this.data[this.currentValue[1]]]:this.data[this.currentValue]:this.currentValue},set:function(e){if(this.data)if(this.isRange){var t=this.data.indexOf(e[0]),i=this.data.indexOf(e[1]);t>-1&&i>-1&&(this.currentValue=[t,i])}else{var s=this.data.indexOf(e);s>-1&&(this.currentValue=s)}else this.currentValue=e}},maximum:function(){return this.data?this.data.length-1:this.max},spacing:function(){return this.data?1:this.interval},total:function(){return this.data?this.data.length-1:((this.maximum-this.minimum)%this.interval!==0&&console.error("[Vue warn]: Prop[interval] is illegal, Please make sure that the interval can be divisible"),(this.maximum-this.minimum)/this.interval)},gap:function(){return this.size/this.total},offset:function(){return"vertical"===this.direction?this.$refs.elem.getBoundingClientRect().top+window.pageYOffset||document.documentElement.scrollTop:this.$refs.elem.getBoundingClientRect().left},position:function(){return this.isRange?[(this.currentValue[0]-this.minimum)/this.spacing*this.gap,(this.currentValue[1]-this.minimum)/this.spacing*this.gap]:(this.currentValue-this.minimum)/this.spacing*this.gap},limit:function(){return this.isRange?[[0,this.position[1]],[this.position[0],this.size]]:[0,this.size]},valueLimit:function(){return this.isRange?[[this.minimum,this.currentValue[1]],[this.currentValue[0],this.maximum]]:[this.minimum,this.maximum]},wrapStyles:function(){return"vertical"===this.direction?{height:"number"==typeof this.height?this.height+"px":this.height}:{width:"number"==typeof this.width?this.width+"px":this.width}},elemStyles:function(){return"vertical"===this.direction?{width:this.width+"px",height:"100%",margin:this.dotSize/2+"px"}:{height:this.height+"px",margin:this.dotSize/2+"px"}},dotStyles:function(){return"vertical"===this.direction?{width:this.dotSize+"px",height:this.dotSize+"px",left:-(this.dotSize-this.width)/2+"px"}:{width:this.dotSize+"px",height:this.dotSize+"px",top:-(this.dotSize-this.height)/2+"px"}},piecewiseStyle:function(){return"vertical"===this.direction?{width:this.width+"px",height:this.width+"px"}:{width:this.height+"px",height:this.height+"px"}}},watch:{val:function(e){this.flag||this.setValue(e)}},methods:{bindEvents:function(){this.isMoblie?(document.addEventListener("touchmove",this.moving),document.addEventListener("touchend",this.moveEnd)):(document.addEventListener("mousemove",this.moving),document.addEventListener("mouseup",this.moveEnd),document.addEventListener("mouseleave",this.moveEnd))},unbindEvents:function(){this.isMoblie?(document.removeEventListener("touchmove",this.moving),document.removeEventListener("touchend",this.moveEnd)):(document.removeEventListener("mousemove",this.moving),document.removeEventListener("mouseup",this.moveEnd),document.removeEventListener("mouseleave",this.moveEnd))},getPos:function(e){var t=void 0;return t="vertical"===this.direction?this.reverse?e.pageY-this.offset:this.size-(e.pageY-this.offset):this.reverse?this.size-(e.clientX-this.offset):e.clientX-this.offset},wrapClick:function(e){if(this.isDisabled||e.target.classList.contains("vue-slider-dot"))return!1;var t=this.getPos(e);this.isRange&&(this.currentSlider=t>(this.position[1]-this.position[0])/2+this.position[0]?1:0),this.setValueOnPos(t)},moveStart:function(e){return!this.isDisabled&&(this.isRange&&(this.currentSlider=e),this.flag=!0,void this.$emit("drag-start",this))},moving:function(e){return!!this.flag&&(e.preventDefault(),this.isMoblie&&(e=e.targetTouches[0]),void this.setValueOnPos(this.getPos(e),!0))},moveEnd:function(e){this.flag&&this.$emit("drag-end",this),this.flag=!1,this.setPosition(.2)},setValueOnPos:function(e,t){var i=this.isRange?this.limit[this.currentSlider]:this.limit,s=this.isRange?this.valueLimit[this.currentSlider]:this.valueLimit;if(e>=i[0]&&e<=i[1]){this.setTransform(e);var r=Math.round(e/this.gap)*this.spacing+this.minimum;this.setCurrentValue(r,t)}else e<i[0]?(this.setTransform(i[0]),this.setCurrentValue(s[0]),1===this.currentSlider&&(this.currentSlider=0)):(this.setTransform(i[1]),this.setCurrentValue(s[1]),0===this.currentSlider&&(this.currentSlider=1))},isDiff:function(e,t){return Object.prototype.toString.call(e)!==Object.prototype.toString.call(t)||(Array.isArray(e)&&e.length===t.length?e.some(function(e,i){return e!==t[i]}):e!==t)},setCurrentValue:function(e,t){return!(e<this.minimum||e>this.maximum)&&(this.isRange?this.isDiff(this.currentValue[this.currentSlider],e)&&(this.currentValue.splice(this.currentSlider,1,e),this.$emit("callback",this.value)):this.isDiff(this.currentValue,e)&&(this.currentValue=e,this.$emit("callback",this.value)),void(t||this.setPosition()))},setIndex:function(e){e=this.spacing*e+this.minimum,this.isRange&&(this.currentSlider=e>(this.currentValue[1]-this.currentValue[0])/2+this.currentValue[0]?1:0),this.setCurrentValue(e)},setValue:function(e){this.isDiff(this.value,e)&&(this.value=e,this.$emit("callback",this.value)),this.setPosition()},setPosition:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.speed;this.flag||this.setTransitionTime(e),this.isRange?(this.currentSlider=0,this.setTransform(this.position[this.currentSlider]),this.currentSlider=1,this.setTransform(this.position[this.currentSlider])):this.setTransform(this.position),this.flag||this.setTransitionTime(0)},setTransform:function(e){var t=("vertical"===this.direction?this.dotSize/2-e:e-this.dotSize/2)*(this.reverse?-1:1),i="vertical"===this.direction?"translateY( "+t+"px )":"translateX( "+t+"px )",s=(0===this.currentSlider?this.position[1]-e:e-this.position[0])+"px",r=(0===this.currentSlider?e:this.position[0])+"px";this.isRange?(this.slider[this.currentSlider].style.transform=i,this.slider[this.currentSlider].style.WebkitTransform=i,this.slider[this.currentSlider].style.msTransform=i,"vertical"===this.direction?(this.$refs.process.style.height=s,this.$refs.process.style[this.reverse?"top":"bottom"]=r):(this.$refs.process.style.width=s,this.$refs.process.style[this.reverse?"right":"left"]=r)):(this.slider.style.transform=i,this.slider.style.WebkitTransform=i,this.slider.style.msTransform=i,"vertical"===this.direction?this.$refs.process.style.height=e+"px":this.$refs.process.style.width=e+"px")},setTransitionTime:function(e){if(e||this.$refs.process.offsetWidth,this.isRange){for(var t=0;t<this.slider.length;t++)this.slider[t].style.transitionDuration=e+"s",this.slider[t].style.WebkitTransitionDuration=e+"s";this.$refs.process.style.transitionDuration=e+"s",this.$refs.process.style.WebkitTransitionDuration=e+"s"}else this.slider.style.transitionDuration=e+"s",this.slider.style.WebkitTransitionDuration=e+"s",this.$refs.process.style.transitionDuration=e+"s",this.$refs.process.style.WebkitTransitionDuration=e+"s"},getValue:function(){return this.value},getIndex:function(){return Array.isArray(this.currentValue)?this.data?this.currentValue:[(this.currentValue[0]-this.minimum)/this.spacing,(this.currentValue[1]-this.minimum)/this.spacing]:(this.currentValue-this.minimum)/this.spacing},refresh:function(){this.size="vertical"===this.direction?this.$refs.elem.offsetHeight:this.$refs.elem.offsetWidth,this.setPosition(0)}},created:function(){window.addEventListener("resize",this.refresh)},mounted:function(){this.$nextTick(function(){this.size="vertical"===this.direction?this.$refs.elem.offsetHeight:this.$refs.elem.offsetWidth,this.setValue(this.val),this.bindEvents()})},destroyed:function(){this.unbindEvents()}}},function(e,t){e.exports=' <span _v-29912c8e=""> <template v-if=isMoblie> <div ref=wrap :class="[\'vue-slider-wrap\', flowDirection, className, disabledClass]" v-show=show :style="[( styles || {} ), wrapStyles]" @click=wrapClick _v-29912c8e=""> <div ref=elem class=vue-slider :style=elemStyles _v-29912c8e=""> <template v-if=isRange> <div ref=dot0 :data-rangevalue=value[0] :class="[ tooltipStatus, `vue-slider-tooltip-${tooltipDirection}`, \'vue-slider-dot\']" :style=dotStyles @touchstart=moveStart(0) _v-29912c8e=""></div> <div ref=dot1 :data-rangevalue=value[1] :class="[ tooltipStatus, `vue-slider-tooltip-${tooltipDirection}`, \'vue-slider-dot\']" :style=dotStyles @touchstart=moveStart(1) _v-29912c8e=""></div> </template> <template v-else=""> <div ref=dot :data-rangevalue=value :class="[ tooltipStatus, `vue-slider-tooltip-${tooltipDirection}`, \'vue-slider-dot\']" :style=dotStyles @touchstart=moveStart _v-29912c8e=""></div> </template> <template v-if=piecewise> <ul v-if="direction === \'vertical\'" class=vue-slider-piecewise _v-29912c8e=""> <li v-for="i in (total - 1)" :style="[ piecewiseStyle, { bottom: `${ gap * i - width / 2 }px`, left: \'0px\' }]" _v-29912c8e=""></li> </ul> <ul v-else="" class=vue-slider-piecewise _v-29912c8e=""> <li v-for="i in (total - 1)" :style="[ piecewiseStyle, { left: `${ gap * i - height / 2 }px`, top: \'0px\' }]" _v-29912c8e=""></li> </ul> </template> <span ref=process class=vue-slider-process _v-29912c8e=""></span> </div> </div> </template> <template v-else=""> <div ref=wrap :class="[\'vue-slider-wrap\', flowDirection, className, disabledClass]" v-show=show :style="[( styles || {} ), wrapStyles]" @click=wrapClick _v-29912c8e=""> <div ref=elem class=vue-slider :style=elemStyles _v-29912c8e=""> <template v-if=isRange> <div ref=dot0 :data-rangevalue=value[0] :class="[ tooltipStatus, `vue-slider-tooltip-${tooltipDirection}`, \'vue-slider-dot\']" :style=dotStyles @mousedown=moveStart(0) _v-29912c8e=""></div> <div ref=dot1 :data-rangevalue=value[1] :class="[ tooltipStatus, `vue-slider-tooltip-${tooltipDirection}`, \'vue-slider-dot\']" :style=dotStyles @mousedown=moveStart(1) _v-29912c8e=""></div> </template> <template v-else=""> <div ref=dot :data-rangevalue=value :class="[ tooltipStatus, `vue-slider-tooltip-${tooltipDirection}`, \'vue-slider-dot\']" :style=dotStyles @mousedown=moveStart _v-29912c8e=""></div> </template> <template v-if=piecewise> <ul v-if="direction === \'vertical\'" class=vue-slider-piecewise _v-29912c8e=""> <li v-for="i in (total - 1)" :style="[ piecewiseStyle, { bottom: `${ gap * i - width / 2 }px`, left: \'0px\' }]" _v-29912c8e=""></li> </ul> <ul v-else="" class=vue-slider-piecewise _v-29912c8e=""> <li v-for="i in (total - 1)" :style="[ piecewiseStyle, { left: `${ gap * i - height / 2 }px`, top: \'0px\' }]" _v-29912c8e=""></li> </ul> </template> <span ref=process class=vue-slider-process _v-29912c8e=""></span> </div> </div> </template> </span> '}])});
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define("vue-slider-component",[],t):"object"==typeof exports?exports["vue-slider-component"]=t():e["vue-slider-component"]=t()}(this,function(){return function(e){function t(s){if(i[s])return i[s].exports;var r=i[s]={exports:{},id:s,loaded:!1};return e[s].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t,i){"use strict";function s(e){return e&&e.__esModule?e:{"default":e}}Object.defineProperty(t,"__esModule",{value:!0});var r=i(1),o=s(r);t["default"]=o["default"]},function(e,t,i){var s,r,o={};i(2),s=i(6),r=i(7),e.exports=s||{},e.exports.__esModule&&(e.exports=e.exports["default"]);var n="function"==typeof e.exports?e.exports.options||(e.exports.options={}):e.exports;r&&(n.template=r),n.computed||(n.computed={}),Object.keys(o).forEach(function(e){var t=o[e];n.computed[e]=function(){return t}})},function(e,t,i){var s=i(3);"string"==typeof s&&(s=[[e.id,s,""]]);i(5)(s,{});s.locals&&(e.exports=s.locals)},function(e,t,i){t=e.exports=i(4)(),t.push([e.id,".vue-slider-wrap[_v-29912c8e]{position:relative;display:block;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.vue-slider-wrap.vue-slider-disabled[_v-29912c8e]{opacity:.5;cursor:not-allowed}.vue-slider-wrap.vue-slider-disabled .vue-slider-dot[_v-29912c8e]{cursor:not-allowed}.vue-slider-wrap .vue-slider[_v-29912c8e]{position:relative;display:block;border-radius:15px;background-color:#ccc}.vue-slider-process[_v-29912c8e]{position:absolute;border-radius:15px;background-color:#3498db;-webkit-transition:all 0s;transition:all 0s;z-index:1}.vue-slider-horizontal .vue-slider-process[_v-29912c8e]{width:0;height:100%;top:0;left:0}.vue-slider-vertical .vue-slider-process[_v-29912c8e]{width:100%;height:0;bottom:0;left:0}.vue-slider-horizontal-reverse .vue-slider-process[_v-29912c8e]{width:0;height:100%;top:0;right:0}.vue-slider-vertical-reverse .vue-slider-process[_v-29912c8e]{width:100%;height:0;top:0;left:0}.vue-slider-dot[_v-29912c8e]{position:absolute;border-radius:50%;background-color:#fff;box-shadow:.5px .5px 2px 1px rgba(0,0,0,.32);-webkit-transition:all 0s;transition:all 0s;cursor:pointer;z-index:3}.vue-slider-horizontal .vue-slider-dot[_v-29912c8e]{left:0}.vue-slider-vertical .vue-slider-dot[_v-29912c8e]{bottom:0}.vue-slider-horizontal-reverse .vue-slider-dot[_v-29912c8e]{right:0}.vue-slider-vertical-reverse .vue-slider-dot[_v-29912c8e]{top:0}.vue-slider-dot[_v-29912c8e]:after{content:attr(data-rangevalue);display:none;font-size:14px;white-space:nowrap;position:absolute;padding:2px 5px;color:#fff;border-radius:5px;background-color:#3498db;z-index:9}.vue-slider-dot.vue-slider-tooltip-top[_v-29912c8e]:after{top:0;left:50%;-webkit-transform:translate(-50%,calc(-100% - 10px));transform:translate(-50%,calc(-100% - 10px))}.vue-slider-dot.vue-slider-tooltip-bottom[_v-29912c8e]:after{top:100%;left:50%;-webkit-transform:translate(-50%,10px);transform:translate(-50%,10px)}.vue-slider-dot.vue-slider-tooltip-left[_v-29912c8e]:after{top:50%;left:0;-webkit-transform:translate(calc(-100% - 10px),-50%);transform:translate(calc(-100% - 10px),-50%)}.vue-slider-dot.vue-slider-tooltip-right[_v-29912c8e]:after{top:50%;left:100%;-webkit-transform:translate(10px,-50%);transform:translate(10px,-50%)}.vue-slider-dot.vue-slider-tooltip-top[_v-29912c8e]:before{top:-10px;border:5px solid transparent;border-top-color:#3498db}.vue-slider-dot.vue-slider-tooltip-bottom[_v-29912c8e]:before,.vue-slider-dot.vue-slider-tooltip-top[_v-29912c8e]:before{content:'';display:none;position:absolute;left:50%;width:0;height:0;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.vue-slider-dot.vue-slider-tooltip-bottom[_v-29912c8e]:before{top:100%;border:5px solid transparent;border-bottom-color:#3498db}.vue-slider-dot.vue-slider-tooltip-left[_v-29912c8e]:before{left:-10px;border:5px solid transparent;border-left-color:#3498db}.vue-slider-dot.vue-slider-tooltip-left[_v-29912c8e]:before,.vue-slider-dot.vue-slider-tooltip-right[_v-29912c8e]:before{content:'';display:none;position:absolute;top:50%;width:0;height:0;-webkit-transform:translateY(-50%);transform:translateY(-50%)}.vue-slider-dot.vue-slider-tooltip-right[_v-29912c8e]:before{left:100%;border:5px solid transparent;border-right-color:#3498db}.vue-slider-dot.vue-slider-hover[_v-29912c8e]:hover:after,.vue-slider-dot.vue-slider-hover[_v-29912c8e]:hover:before{display:block}.vue-slider-dot.vue-slider-always[_v-29912c8e]:after,.vue-slider-dot.vue-slider-always[_v-29912c8e]:before{display:block!important}.vue-slider-piecewise[_v-29912c8e]{list-style:none}.vue-slider-piecewise li[_v-29912c8e]{position:absolute;background-color:rgba(0,0,0,.16);border-radius:50%;z-index:2}.vue-slider-horizontal .vue-slider-piecewise li[_v-29912c8e]{top:0}.vue-slider-vertical .vue-slider-piecewise li[_v-29912c8e]{left:0}",""])},function(e,t){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;t<this.length;t++){var i=this[t];i[2]?e.push("@media "+i[2]+"{"+i[1]+"}"):e.push(i[1])}return e.join("")},e.i=function(t,i){"string"==typeof t&&(t=[[null,t,""]]);for(var s={},r=0;r<this.length;r++){var o=this[r][0];"number"==typeof o&&(s[o]=!0)}for(r=0;r<t.length;r++){var n=t[r];"number"==typeof n[0]&&s[n[0]]||(i&&!n[2]?n[2]=i:i&&(n[2]="("+n[2]+") and ("+i+")"),e.push(n))}},e}},function(e,t,i){function s(e,t){for(var i=0;i<e.length;i++){var s=e[i],r=h[s.id];if(r){r.refs++;for(var o=0;o<r.parts.length;o++)r.parts[o](s.parts[o]);for(;o<s.parts.length;o++)r.parts.push(a(s.parts[o],t))}else{for(var n=[],o=0;o<s.parts.length;o++)n.push(a(s.parts[o],t));h[s.id]={id:s.id,refs:1,parts:n}}}}function r(e){for(var t=[],i={},s=0;s<e.length;s++){var r=e[s],o=r[0],n=r[1],l=r[2],a=r[3],u={css:n,media:l,sourceMap:a};i[o]?i[o].parts.push(u):t.push(i[o]={id:o,parts:[u]})}return t}function o(e,t){var i=v(),s=g[g.length-1];if("top"===e.insertAt)s?s.nextSibling?i.insertBefore(t,s.nextSibling):i.appendChild(t):i.insertBefore(t,i.firstChild),g.push(t);else{if("bottom"!==e.insertAt)throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");i.appendChild(t)}}function n(e){e.parentNode.removeChild(e);var t=g.indexOf(e);t>=0&&g.splice(t,1)}function l(e){var t=document.createElement("style");return t.type="text/css",o(e,t),t}function a(e,t){var i,s,r;if(t.singleton){var o=m++;i=f||(f=l(t)),s=u.bind(null,i,o,!1),r=u.bind(null,i,o,!0)}else i=l(t),s=d.bind(null,i),r=function(){n(i)};return s(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;s(e=t)}else r()}}function u(e,t,i,s){var r=i?"":s.css;if(e.styleSheet)e.styleSheet.cssText=b(t,r);else{var o=document.createTextNode(r),n=e.childNodes;n[t]&&e.removeChild(n[t]),n.length?e.insertBefore(o,n[t]):e.appendChild(o)}}function d(e,t){var i=t.css,s=t.media,r=t.sourceMap;if(s&&e.setAttribute("media",s),r&&(i+="\n/*# sourceURL="+r.sources[0]+" */",i+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */"),e.styleSheet)e.styleSheet.cssText=i;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(i))}}var h={},c=function(e){var t;return function(){return"undefined"==typeof t&&(t=e.apply(this,arguments)),t}},p=c(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),v=c(function(){return document.head||document.getElementsByTagName("head")[0]}),f=null,m=0,g=[];e.exports=function(e,t){t=t||{},"undefined"==typeof t.singleton&&(t.singleton=p()),"undefined"==typeof t.insertAt&&(t.insertAt="bottom");var i=r(e);return s(i,t),function(e){for(var o=[],n=0;n<i.length;n++){var l=i[n],a=h[l.id];a.refs--,o.push(a)}if(e){var u=r(e);s(u,t)}for(var n=0;n<o.length;n++){var a=o[n];if(0===a.refs){for(var d=0;d<a.parts.length;d++)a.parts[d]();delete h[a.id]}}}};var b=function(){var e=[];return function(t,i){return e[t]=i,e.filter(Boolean).join("\n")}}()},function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t["default"]={data:function(){return{flag:!1,size:0,currentValue:0,currentSlider:0}},props:{className:String,styles:Object,width:{type:[Number,String],"default":"auto"},height:{type:[Number,String],"default":4},data:{type:Array,"default":null},dotSize:{type:Number,"default":16},min:{type:Number,"default":0},max:{type:Number,"default":100},interval:{type:Number,"default":1},show:{type:Boolean,"default":!0},disabled:{type:Boolean,"default":!1},piecewise:{type:Boolean,"default":!1},tooltip:{type:[String,Boolean],"default":"always"},eventType:{type:String,"default":"auto"},direction:{type:String,"default":"horizontal"},tooltipDir:{type:String},reverse:{type:Boolean,"default":!1},speed:{type:Number,"default":.5},val:{type:[String,Number,Array],"default":0}},computed:{flowDirection:function(){return"vue-slider-"+(this.direction+(this.reverse?"-reverse":""))},tooltipDirection:function(){return this.tooltipDir||("vertical"===this.direction?"left":"top")},tooltipStatus:function(){return"hover"===this.tooltip&&this.flag?"vue-slider-always":this.tooltip?"vue-slider-"+this.tooltip:""},isMoblie:function(){return"touch"===this.eventType||"mouse"!==this.eventType&&/(iPhone|iPad|iPod|iOS|Android|SymbianOS|Windows Phone|Mobile)/i.test(navigator.userAgent)},isDisabled:function(){return"none"===this.eventType||this.disabled},disabledClass:function(){return this.disabled?"vue-slider-disabled":""},isRange:function(){return Array.isArray(this.val)},slider:function(){return this.isRange?[this.$refs.dot0,this.$refs.dot1]:this.$refs.dot},minimum:function(){return this.data?0:this.min},value:{get:function(){return this.data?this.isRange?[this.data[this.currentValue[0]],this.data[this.currentValue[1]]]:this.data[this.currentValue]:this.currentValue},set:function(e){if(this.data)if(this.isRange){var t=this.data.indexOf(e[0]),i=this.data.indexOf(e[1]);t>-1&&i>-1&&(this.currentValue=[t,i])}else{var s=this.data.indexOf(e);s>-1&&(this.currentValue=s)}else this.currentValue=e}},maximum:function(){return this.data?this.data.length-1:this.max},spacing:function(){return this.data?1:this.interval},total:function(){return this.data?this.data.length-1:((this.maximum-this.minimum)%this.interval!==0&&console.error("[Vue warn]: Prop[interval] is illegal, Please make sure that the interval can be divisible"),(this.maximum-this.minimum)/this.interval)},gap:function(){return this.size/this.total},offset:function(){return"vertical"===this.direction?this.$refs.elem.getBoundingClientRect().top+window.pageYOffset||document.documentElement.scrollTop:this.$refs.elem.getBoundingClientRect().left},position:function(){return this.isRange?[(this.currentValue[0]-this.minimum)/this.spacing*this.gap,(this.currentValue[1]-this.minimum)/this.spacing*this.gap]:(this.currentValue-this.minimum)/this.spacing*this.gap},limit:function(){return this.isRange?[[0,this.position[1]],[this.position[0],this.size]]:[0,this.size]},valueLimit:function(){return this.isRange?[[this.minimum,this.currentValue[1]],[this.currentValue[0],this.maximum]]:[this.minimum,this.maximum]},wrapStyles:function(){return"vertical"===this.direction?{height:"number"==typeof this.height?this.height+"px":this.height}:{width:"number"==typeof this.width?this.width+"px":this.width}},elemStyles:function(){return"vertical"===this.direction?{width:this.width+"px",height:"100%",margin:this.dotSize/2+"px"}:{height:this.height+"px",margin:this.dotSize/2+"px"}},dotStyles:function(){return"vertical"===this.direction?{width:this.dotSize+"px",height:this.dotSize+"px",left:-(this.dotSize-this.width)/2+"px"}:{width:this.dotSize+"px",height:this.dotSize+"px",top:-(this.dotSize-this.height)/2+"px"}},piecewiseStyle:function(){return"vertical"===this.direction?{width:this.width+"px",height:this.width+"px"}:{width:this.height+"px",height:this.height+"px"}}},watch:{val:function(e){this.flag||this.setValue(e)}},methods:{bindEvents:function(){this.isMoblie?(document.addEventListener("touchmove",this.moving),document.addEventListener("touchend",this.moveEnd)):(document.addEventListener("mousemove",this.moving),document.addEventListener("mouseup",this.moveEnd),document.addEventListener("mouseleave",this.moveEnd))},unbindEvents:function(){this.isMoblie?(document.removeEventListener("touchmove",this.moving),document.removeEventListener("touchend",this.moveEnd)):(document.removeEventListener("mousemove",this.moving),document.removeEventListener("mouseup",this.moveEnd),document.removeEventListener("mouseleave",this.moveEnd))},getPos:function(e){var t=void 0;return t="vertical"===this.direction?this.reverse?e.pageY-this.offset:this.size-(e.pageY-this.offset):this.reverse?this.size-(e.clientX-this.offset):e.clientX-this.offset},wrapClick:function(e){if(this.isDisabled||e.target.classList.contains("vue-slider-dot"))return!1;var t=this.getPos(e);this.isRange&&(this.currentSlider=t>(this.position[1]-this.position[0])/2+this.position[0]?1:0),this.setValueOnPos(t)},moveStart:function(e){return!this.isDisabled&&(this.isRange&&(this.currentSlider=e),this.flag=!0,void this.$emit("drag-start",this))},moving:function(e){return!!this.flag&&(e.preventDefault(),this.isMoblie&&(e=e.targetTouches[0]),void this.setValueOnPos(this.getPos(e),!0))},moveEnd:function(e){this.flag&&this.$emit("drag-end",this),this.flag=!1,this.setPosition(.2)},setValueOnPos:function(e,t){var i=this.isRange?this.limit[this.currentSlider]:this.limit,s=this.isRange?this.valueLimit[this.currentSlider]:this.valueLimit;if(e>=i[0]&&e<=i[1]){this.setTransform(e);var r=Math.round(e/this.gap)*this.spacing+this.minimum;this.setCurrentValue(r,t)}else e<i[0]?(this.setTransform(i[0]),this.setCurrentValue(s[0]),1===this.currentSlider&&(this.currentSlider=0)):(this.setTransform(i[1]),this.setCurrentValue(s[1]),0===this.currentSlider&&(this.currentSlider=1))},isDiff:function(e,t){return Object.prototype.toString.call(e)!==Object.prototype.toString.call(t)||(Array.isArray(e)&&e.length===t.length?e.some(function(e,i){return e!==t[i]}):e!==t)},setCurrentValue:function(e,t){return!(e<this.minimum||e>this.maximum)&&(this.isRange?this.isDiff(this.currentValue[this.currentSlider],e)&&(this.currentValue.splice(this.currentSlider,1,e),this.$emit("callback",this.value)):this.isDiff(this.currentValue,e)&&(this.currentValue=e,this.$emit("callback",this.value)),void(t||this.setPosition()))},setIndex:function(e){e=this.spacing*e+this.minimum,this.isRange&&(this.currentSlider=e>(this.currentValue[1]-this.currentValue[0])/2+this.currentValue[0]?1:0),this.setCurrentValue(e)},setValue:function(e){this.isDiff(this.value,e)&&(this.value=e,this.$emit("callback",this.value)),this.setPosition()},setPosition:function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.speed;this.flag||this.setTransitionTime(e),this.isRange?(this.currentSlider=0,this.setTransform(this.position[this.currentSlider]),this.currentSlider=1,this.setTransform(this.position[this.currentSlider])):this.setTransform(this.position),this.flag||this.setTransitionTime(0)},setTransform:function(e){var t=("vertical"===this.direction?this.dotSize/2-e:e-this.dotSize/2)*(this.reverse?-1:1),i="vertical"===this.direction?"translateY( "+t+"px )":"translateX( "+t+"px )",s=(0===this.currentSlider?this.position[1]-e:e-this.position[0])+"px",r=(0===this.currentSlider?e:this.position[0])+"px";this.isRange?(this.slider[this.currentSlider].style.transform=i,this.slider[this.currentSlider].style.WebkitTransform=i,this.slider[this.currentSlider].style.msTransform=i,"vertical"===this.direction?(this.$refs.process.style.height=s,this.$refs.process.style[this.reverse?"top":"bottom"]=r):(this.$refs.process.style.width=s,this.$refs.process.style[this.reverse?"right":"left"]=r)):(this.slider.style.transform=i,this.slider.style.WebkitTransform=i,this.slider.style.msTransform=i,"vertical"===this.direction?this.$refs.process.style.height=e+"px":this.$refs.process.style.width=e+"px")},setTransitionTime:function(e){if(e||this.$refs.process.offsetWidth,this.isRange){for(var t=0;t<this.slider.length;t++)this.slider[t].style.transitionDuration=e+"s",this.slider[t].style.WebkitTransitionDuration=e+"s";this.$refs.process.style.transitionDuration=e+"s",this.$refs.process.style.WebkitTransitionDuration=e+"s"}else this.slider.style.transitionDuration=e+"s",this.slider.style.WebkitTransitionDuration=e+"s",this.$refs.process.style.transitionDuration=e+"s",this.$refs.process.style.WebkitTransitionDuration=e+"s"},getValue:function(){return this.value},getIndex:function(){return Array.isArray(this.currentValue)?this.data?this.currentValue:[(this.currentValue[0]-this.minimum)/this.spacing,(this.currentValue[1]-this.minimum)/this.spacing]:(this.currentValue-this.minimum)/this.spacing},refresh:function(){this.size="vertical"===this.direction?this.$refs.elem.offsetHeight:this.$refs.elem.offsetWidth,this.setPosition(0)}},created:function(){window.addEventListener("resize",this.refresh)},mounted:function(){this.$nextTick(function(){this.size="vertical"===this.direction?this.$refs.elem.offsetHeight:this.$refs.elem.offsetWidth,this.setValue(this.val),this.bindEvents()})},destroyed:function(){this.unbindEvents()}}},function(e,t){e.exports=' <span _v-29912c8e=""> <template v-if=isMoblie> <div ref=wrap :class="[\'vue-slider-wrap\', flowDirection, className, disabledClass]" v-show=show :style="[( styles || {} ), wrapStyles]" @click=wrapClick _v-29912c8e=""> <div ref=elem class=vue-slider :style=elemStyles _v-29912c8e=""> <template v-if=isRange> <div ref=dot0 :data-rangevalue=value[0] :class="[ tooltipStatus, \'vue-slider-tooltip-\' + tooltipDirection, \'vue-slider-dot\']" :style=dotStyles @touchstart=moveStart(0) _v-29912c8e=""></div> <div ref=dot1 :data-rangevalue=value[1] :class="[ tooltipStatus, \'vue-slider-tooltip-\' + tooltipDirection, \'vue-slider-dot\']" :style=dotStyles @touchstart=moveStart(1) _v-29912c8e=""></div> </template> <template v-else=""> <div ref=dot :data-rangevalue=value :class="[ tooltipStatus, \'vue-slider-tooltip-\' + tooltipDirection, \'vue-slider-dot\']" :style=dotStyles @touchstart=moveStart _v-29912c8e=""></div> </template> <template v-if=piecewise> <ul v-if="direction === \'vertical\'" class=vue-slider-piecewise _v-29912c8e=""> <li v-for="i in (total - 1)" :style="[ piecewiseStyle, { bottom: gap * i - width / 2 + \'px\', left: \'0px\' }]" _v-29912c8e=""></li> </ul> <ul v-else="" class=vue-slider-piecewise _v-29912c8e=""> <li v-for="i in (total - 1)" :style="[ piecewiseStyle, { left: gap * i - height / 2 + \'px\', top: \'0px\' }]" _v-29912c8e=""></li> </ul> </template> <span ref=process class=vue-slider-process _v-29912c8e=""></span> </div> </div> </template> <template v-else=""> <div ref=wrap :class="[\'vue-slider-wrap\', flowDirection, className, disabledClass]" v-show=show :style="[( styles || {} ), wrapStyles]" @click=wrapClick _v-29912c8e=""> <div ref=elem class=vue-slider :style=elemStyles _v-29912c8e=""> <template v-if=isRange> <div ref=dot0 :data-rangevalue=value[0] :class="[ tooltipStatus, \'vue-slider-tooltip-\' + tooltipDirection, \'vue-slider-dot\']" :style=dotStyles @mousedown=moveStart(0) _v-29912c8e=""></div> <div ref=dot1 :data-rangevalue=value[1] :class="[ tooltipStatus, \'vue-slider-tooltip-\' + tooltipDirection, \'vue-slider-dot\']" :style=dotStyles @mousedown=moveStart(1) _v-29912c8e=""></div> </template> <template v-else=""> <div ref=dot :data-rangevalue=value :class="[ tooltipStatus, \'vue-slider-tooltip-\' + tooltipDirection, \'vue-slider-dot\']" :style=dotStyles @mousedown=moveStart _v-29912c8e=""></div> </template> <template v-if=piecewise> <ul v-if="direction === \'vertical\'" class=vue-slider-piecewise _v-29912c8e=""> <li v-for="i in (total - 1)" :style="[ piecewiseStyle, { bottom: gap * i - width / 2 + \'px\', left: \'0px\' }]" _v-29912c8e=""></li> </ul> <ul v-else="" class=vue-slider-piecewise _v-29912c8e=""> <li v-for="i in (total - 1)" :style="[ piecewiseStyle, { left: gap * i - height / 2 + \'px\', top: \'0px\' }]" _v-29912c8e=""></li> </ul> </template> <span ref=process class=vue-slider-process _v-29912c8e=""></span> </div> </div> </template> </span> '}])});

example/package.json

@@ -23,3 +23,6 @@ {
     "webpack-dev-server": "^2.1.0-beta.0"
+  },
+  "browserify": {
+    "transform": ["vueify"]
   }
 }

package.json

 {
   "name": "vue-slider-component",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Can use the Slider component in vue1.x and vue2.x",
@@ -38,3 +38,6 @@ "keywords": [
     "webpack": "^1.13.1"
+  },
+  "browserify": {
+    "transform": ["vueify"]
   }
 }

README.md

@@ -71,3 +71,3 @@ # vue-slider-component
 <br>
-Use in vue2.x 
+Use in vue2.x
 <br>Because```.sync``` was deprecated. Props are now always one-way down. So in order to realize the two-way, Can be set in the @callback
@@ -84,9 +84,2 @@
 import vueSlider from 'vue-slider-component'
-/*
-  because in the runtime-only build doesn't work
-  The solution is modify setting in webpack config
-  resolve: {
-    alias: {vue: 'vue/dist/vue.js'}
-  }
-*/
 
@@ -113,3 +106,12 @@ new Vue({
 ```
+<br>
+Use with Browserify (vueify)
+<br>Use this little fix:
 
+e.g:
+```js
+import vueSlider from 'vue-slider-component/src/vue2-slider.vue'
+```
+
+
 ## Options
@@ -123,6 +125,6 @@
 | direction   | String        | horizontal | set the direction of the component, optional value: ['horizontal', 'vertical'] |
-| eventType   | String        | auto   | the event type, optional value: ['auto', 'touch', 'mouse', 'none'] |
+| event-type  | String        | auto   | the event type, optional value: ['auto', 'touch', 'mouse', 'none'] |
 | width       | Number[,String(in horizontal)] | 150      | width of the component |
 | height      | Number[,String(in vertical)] | 4        | height of the component |
-| dotSize     | Number        | 15       | size of the sliders |
+| dot-size    | Number        | 15       | size of the sliders |
 | min         | Number        | 0        | the minimum value   |
@@ -136,3 +138,4 @@ | max         | Number        | 100      | the maximum value   |
 | tooltip     | String,Boolean| false    | control the tooltip, optional value: ['hover', 'always', false] |
-| tooltipDir  | String        | top(in horizontal)or left(in vertical) | set the direction of the tooltip, optional value: ['top', 'bottom', 'left', 'right'] |
+| tooltip-dir | String        | top(in horizontal)or left(in vertical) | set the direction of the tooltip, optional value: ['top', 'bottom', 'left', 'right'] |
+| reverse     | Boolean       | false    | whether the component reverse (such as Right to left, Top to bottom) |
 | val         | Number,Array  | 0        | initial value (if the value for the array open range model) |
@@ -164,2 +167,2 @@ | data        | Array         | null     | the custom data |
 
-[The MIT License](https://nightcatsama.github.io/vue-slider-component/LICENSE)
+[The MIT License](https://nightcatsama.github.io/vue-slider-component/LICENSE)

No alert changes

Improved metrics

Total package byte prevSize

198512

increased by0.06%

Number of lines in readme file

163

increased by2.52%

No dependency changes