vue-range-slider - npm Package Compare versions

Comparing version 0.2.3 to 0.2.4

dist/vue-range-slider.cjs.js

 /*!
- * vue-range-slider v0.2.3
+ * vue-range-slider v0.2.4
  * https://github.com/ktsn/vue-range-slider
@@ -149,5 +149,3 @@ *
 var RangeSlider = { render: function render() {
-    with(this) {
-      return _h('span', { staticClass: "range-slider" }, [_h('drag-helper', { attrs: { "target-selector": ".range-slider-knob", "disabled": disabled }, on: { "drag": drag, "dragend": dragEnd } }, [_h('span', { ref: "inner", staticClass: "range-slider-inner" }, [_h('input', { staticClass: "range-slider-hidden", attrs: { "type": "text", "name": name }, domProps: { "value": actualValue } }), " ", _h('span', { staticClass: "range-slider-rail" }), " ", _h('span', { staticClass: "range-slider-fill", style: { width: valuePercent + '%' } }), " ", _h('span', { staticClass: "range-slider-knob", style: { left: valuePercent + '%' } })])])]);
-    }
+    var _vm = this;return _vm._c('span', { staticClass: "range-slider" }, [_vm._c('drag-helper', { attrs: { "target-selector": ".range-slider-knob", "disabled": _vm.disabled }, on: { "drag": _vm.drag, "dragend": _vm.dragEnd } }, [_vm._c('span', { ref: "inner", staticClass: "range-slider-inner" }, [_vm._c('input', { staticClass: "range-slider-hidden", attrs: { "type": "text", "name": _vm.name }, domProps: { "value": _vm.actualValue } }), _vm._v(" "), _vm._c('span', { staticClass: "range-slider-rail" }), _vm._v(" "), _vm._c('span', { staticClass: "range-slider-fill", style: { width: _vm.valuePercent + '%' } }), _vm._v(" "), _vm._c('span', { staticClass: "range-slider-knob", style: { left: _vm.valuePercent + '%' } })])])], 1);
   }, staticRenderFns: [],
@@ -154,0 +152,0 @@ props: {

dist/vue-range-slider.js

 /*!
- * vue-range-slider v0.2.3
+ * vue-range-slider v0.2.4
  * https://github.com/ktsn/vue-range-slider
@@ -155,5 +155,3 @@ *
 var RangeSlider = { render: function render() {
-    with(this) {
-      return _h('span', { staticClass: "range-slider" }, [_h('drag-helper', { attrs: { "target-selector": ".range-slider-knob", "disabled": disabled }, on: { "drag": drag, "dragend": dragEnd } }, [_h('span', { ref: "inner", staticClass: "range-slider-inner" }, [_h('input', { staticClass: "range-slider-hidden", attrs: { "type": "text", "name": name }, domProps: { "value": actualValue } }), " ", _h('span', { staticClass: "range-slider-rail" }), " ", _h('span', { staticClass: "range-slider-fill", style: { width: valuePercent + '%' } }), " ", _h('span', { staticClass: "range-slider-knob", style: { left: valuePercent + '%' } })])])]);
-    }
+    var _vm = this;return _vm._c('span', { staticClass: "range-slider" }, [_vm._c('drag-helper', { attrs: { "target-selector": ".range-slider-knob", "disabled": _vm.disabled }, on: { "drag": _vm.drag, "dragend": _vm.dragEnd } }, [_vm._c('span', { ref: "inner", staticClass: "range-slider-inner" }, [_vm._c('input', { staticClass: "range-slider-hidden", attrs: { "type": "text", "name": _vm.name }, domProps: { "value": _vm.actualValue } }), _vm._v(" "), _vm._c('span', { staticClass: "range-slider-rail" }), _vm._v(" "), _vm._c('span', { staticClass: "range-slider-fill", style: { width: _vm.valuePercent + '%' } }), _vm._v(" "), _vm._c('span', { staticClass: "range-slider-knob", style: { left: _vm.valuePercent + '%' } })])])], 1);
   }, staticRenderFns: [],
@@ -160,0 +158,0 @@ props: {

dist/vue-range-slider.min.js

 /*!
- * vue-range-slider v0.2.3
+ * vue-range-slider v0.2.4
  * https://github.com/ktsn/vue-range-slider
@@ -10,2 +10,2 @@ *
  */
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.VueRangeSlider=e()}(this,function(){function forEachListener(t,e){var n=t.$options.events;Object.keys(n).forEach(function(i){e(i,function(e){return n[i].call(t,e)})})}function relativeMouseOffset(t,e){var n=e.getBoundingClientRect();return{left:t.clientX-n.left,top:t.clientY-n.top}}function round$1(t,e,n,i){if(e>=t)return e;var r=Math.floor((n-e)/i)*i+e;if(t>=r)return r;var s=(t-e)/i,a=Math.floor(s),u=s-a;return 0===u?t:.5>u?i*a+e:i*(a+1)+e}var DocumentEventHelper={created:function(){forEachListener(this,function(t,e){document.addEventListener(t,e)})},beforeDestroy:function(){forEachListener(this,function(t,e){document.removeEventListener(t,e)})}},DragHelper={mixins:[DocumentEventHelper],props:{targetSelector:String,disabled:Boolean},data:function(){return{isDrag:!1}},watch:{target:"bindTarget"},mounted:function(){this.bindTarget()},events:{mousedown:function(t){return this.dragStart(t,this.offsetByMouse)},mousemove:function(t){return this.dragMove(t,this.offsetByMouse)},mouseup:function(t){return this.dragEnd(t,this.offsetByMouse)},touchstart:function(t){return this.dragStart(t,this.offsetByTouch)},touchmove:function(t){return this.dragMove(t,this.offsetByTouch)},touchend:function(t){return this.dragEnd(t,this.offsetByTouch)},touchcancel:function(t){return this.dragEnd(t,this.offsetByTouch)}},methods:{bindTarget:function(){this.target=this.$el.querySelector(this.targetSelector)||this.$el},offsetByMouse:function(t){return relativeMouseOffset(t,this.$el)},offsetByTouch:function(t){var e=0===t.touches.length?t.changedTouches[0]:t.touches[0];return relativeMouseOffset(e,this.$el)},dragStart:function(t,e){this.disabled||this.target!==t.target||(t.preventDefault(),this.isDrag=!0,this.$emit("dragstart",t,e(t),this.target))},dragMove:function(t,e){this.isDrag&&(t.preventDefault(),this.$emit("drag",t,e(t),this.target))},dragEnd:function(t,e){this.isDrag&&(t.preventDefault(),this.isDrag=!1,this.$emit("dragend",t,e(t),this.target))}},render:function(){return this.$slots["default"]&&this.$slots["default"][0]}},RangeSlider={render:function render(){with(this)return _h("span",{staticClass:"range-slider"},[_h("drag-helper",{attrs:{"target-selector":".range-slider-knob",disabled:disabled},on:{drag:drag,dragend:dragEnd}},[_h("span",{ref:"inner",staticClass:"range-slider-inner"},[_h("input",{staticClass:"range-slider-hidden",attrs:{type:"text",name:name},domProps:{value:actualValue}})," ",_h("span",{staticClass:"range-slider-rail"})," ",_h("span",{staticClass:"range-slider-fill",style:{width:valuePercent+"%"}})," ",_h("span",{staticClass:"range-slider-knob",style:{left:valuePercent+"%"}})])])])},staticRenderFns:[],props:{name:String,value:[String,Number],disabled:{type:Boolean,"default":!1},min:{type:[String,Number],"default":0},max:{type:[String,Number],"default":100},step:{type:[String,Number],"default":1}},data:function(){return{actualValue:null}},created:function(){var t=this._min,e=this._max,n=Number(this.value);(null==this.value||isNaN(n))&&(n=t>e?t:(t+e)/2),this.actualValue=this.round(n)},computed:{_min:function(){return Number(this.min)},_max:function(){return Number(this.max)},_step:function(){return Number(this.step)},valuePercent:function(){return(this.actualValue-this._min)/(this._max-this._min)*100}},watch:{value:function t(e){var t=Number(e);null==e||isNaN(t)||(this.actualValue=this.round(t))},min:function(){this.actualValue=this.round(this.actualValue)},max:function(){this.actualValue=this.round(this.actualValue)}},methods:{drag:function(t,e){var n=this.$refs.inner.offsetWidth;this.actualValue=this.round(this.valueFromBounds(e.left,n)),this.emitEvent(this.actualValue)},dragEnd:function(t,e){var n=this.$refs.inner.offsetWidth;this.actualValue=this.round(this.valueFromBounds(e.left,n)),this.emitEvent(this.actualValue,!0)},emitEvent:function(t,e){this.$emit("input",t),e&&this.$emit("change",t)},valueFromBounds:function(t,e){return t/e*(this._max-this._min)+this._min},round:function(t){return round$1(t,this._min,this._max,this._step)}},components:{DragHelper:DragHelper}};return RangeSlider});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):t.VueRangeSlider=e()}(this,function(){function t(t,e){var n=t.$options.events;Object.keys(n).forEach(function(i){e(i,function(e){return n[i].call(t,e)})})}function e(t,e){var n=e.getBoundingClientRect();return{left:t.clientX-n.left,top:t.clientY-n.top}}function n(t,e,n,i){if(e>=t)return e;var r=Math.floor((n-e)/i)*i+e;if(t>=r)return r;var s=(t-e)/i,a=Math.floor(s),u=s-a;return 0===u?t:.5>u?i*a+e:i*(a+1)+e}var i={created:function(){t(this,function(t,e){document.addEventListener(t,e)})},beforeDestroy:function(){t(this,function(t,e){document.removeEventListener(t,e)})}},r={mixins:[i],props:{targetSelector:String,disabled:Boolean},data:function(){return{isDrag:!1}},watch:{target:"bindTarget"},mounted:function(){this.bindTarget()},events:{mousedown:function(t){return this.dragStart(t,this.offsetByMouse)},mousemove:function(t){return this.dragMove(t,this.offsetByMouse)},mouseup:function(t){return this.dragEnd(t,this.offsetByMouse)},touchstart:function(t){return this.dragStart(t,this.offsetByTouch)},touchmove:function(t){return this.dragMove(t,this.offsetByTouch)},touchend:function(t){return this.dragEnd(t,this.offsetByTouch)},touchcancel:function(t){return this.dragEnd(t,this.offsetByTouch)}},methods:{bindTarget:function(){this.target=this.$el.querySelector(this.targetSelector)||this.$el},offsetByMouse:function(t){return e(t,this.$el)},offsetByTouch:function(t){var n=0===t.touches.length?t.changedTouches[0]:t.touches[0];return e(n,this.$el)},dragStart:function(t,e){this.disabled||this.target!==t.target||(t.preventDefault(),this.isDrag=!0,this.$emit("dragstart",t,e(t),this.target))},dragMove:function(t,e){this.isDrag&&(t.preventDefault(),this.$emit("drag",t,e(t),this.target))},dragEnd:function(t,e){this.isDrag&&(t.preventDefault(),this.isDrag=!1,this.$emit("dragend",t,e(t),this.target))}},render:function(){return this.$slots["default"]&&this.$slots["default"][0]}},s={render:function(){var t=this;return t._c("span",{staticClass:"range-slider"},[t._c("drag-helper",{attrs:{"target-selector":".range-slider-knob",disabled:t.disabled},on:{drag:t.drag,dragend:t.dragEnd}},[t._c("span",{ref:"inner",staticClass:"range-slider-inner"},[t._c("input",{staticClass:"range-slider-hidden",attrs:{type:"text",name:t.name},domProps:{value:t.actualValue}}),t._v(" "),t._c("span",{staticClass:"range-slider-rail"}),t._v(" "),t._c("span",{staticClass:"range-slider-fill",style:{width:t.valuePercent+"%"}}),t._v(" "),t._c("span",{staticClass:"range-slider-knob",style:{left:t.valuePercent+"%"}})])])],1)},staticRenderFns:[],props:{name:String,value:[String,Number],disabled:{type:Boolean,"default":!1},min:{type:[String,Number],"default":0},max:{type:[String,Number],"default":100},step:{type:[String,Number],"default":1}},data:function(){return{actualValue:null}},created:function(){var t=this._min,e=this._max,n=Number(this.value);(null==this.value||isNaN(n))&&(n=t>e?t:(t+e)/2),this.actualValue=this.round(n)},computed:{_min:function(){return Number(this.min)},_max:function(){return Number(this.max)},_step:function(){return Number(this.step)},valuePercent:function(){return(this.actualValue-this._min)/(this._max-this._min)*100}},watch:{value:function a(t){var a=Number(t);null==t||isNaN(a)||(this.actualValue=this.round(a))},min:function(){this.actualValue=this.round(this.actualValue)},max:function(){this.actualValue=this.round(this.actualValue)}},methods:{drag:function(t,e){var n=this.$refs.inner.offsetWidth;this.actualValue=this.round(this.valueFromBounds(e.left,n)),this.emitEvent(this.actualValue)},dragEnd:function(t,e){var n=this.$refs.inner.offsetWidth;this.actualValue=this.round(this.valueFromBounds(e.left,n)),this.emitEvent(this.actualValue,!0)},emitEvent:function(t,e){this.$emit("input",t),e&&this.$emit("change",t)},valueFromBounds:function(t,e){return t/e*(this._max-this._min)+this._min},round:function(t){return n(t,this._min,this._max,this._step)}},components:{DragHelper:r}};return s});

package.json

 {
   "name": "vue-range-slider",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "author": "katashin",
@@ -47,45 +47,45 @@ "description": "Simple slider component of Vue.js",
   "devDependencies": {
-    "autoprefixer": "^6.5.1",
-    "babel-core": "^6.13.2",
-    "babel-eslint": "^6.1.0",
-    "babel-loader": "^6.2.5",
-    "babel-plugin-external-helpers": "^6.8.0",
-    "babel-plugin-transform-class-properties": "^6.10.2",
-    "babel-plugin-transform-flow-strip-types": "^6.8.0",
-    "babel-preset-es2015": "^6.14.0",
+    "autoprefixer": "^6.6.1",
+    "babel-core": "^6.21.0",
+    "babel-eslint": "^7.1.1",
+    "babel-loader": "^6.2.10",
+    "babel-plugin-external-helpers": "^6.18.0",
+    "babel-plugin-transform-class-properties": "^6.19.0",
+    "babel-plugin-transform-flow-strip-types": "^6.21.0",
+    "babel-preset-es2015": "^6.18.0",
     "babel-preset-power-assert": "^1.0.0",
-    "cross-env": "^2.0.0",
-    "css-loader": "^0.25.0",
-    "eslint": "^3.0.0",
-    "eslint-plugin-flowtype": "^2.4.1",
-    "eslint-plugin-html": "^1.5.2",
-    "flow-bin": "^0.32.0",
+    "cross-env": "^3.1.4",
+    "css-loader": "^0.26.1",
+    "eslint": "^3.13.1",
+    "eslint-plugin-flowtype": "^2.29.2",
+    "eslint-plugin-html": "^1.7.0",
+    "flow-bin": "^0.37.4",
     "glob": "^7.1.1",
-    "node-sass": "^3.10.0",
-    "npm-run-all": "^3.0.0",
-    "postcss": "^5.2.4",
-    "postcss-loader": "^1.1.1",
-    "power-assert": "^1.3.1",
-    "rollup": "^0.36.0",
-    "rollup-plugin-babel": "^2.6.1",
-    "rollup-plugin-commonjs": "^5.0.0",
-    "rollup-plugin-json": "^2.0.1",
+    "node-sass": "^4.2.0",
+    "npm-run-all": "^4.0.0",
+    "postcss": "^5.2.9",
+    "postcss-loader": "^1.2.1",
+    "power-assert": "^1.4.2",
+    "rollup": "^0.41.1",
+    "rollup-plugin-babel": "^2.7.1",
+    "rollup-plugin-commonjs": "^7.0.0",
+    "rollup-plugin-json": "^2.1.0",
     "rollup-plugin-multi-entry": "^2.0.1",
-    "rollup-plugin-node-builtins": "^1.0.7",
-    "rollup-plugin-node-globals": "^1.0.7",
+    "rollup-plugin-node-builtins": "^2.0.0",
+    "rollup-plugin-node-globals": "^1.1.0",
     "rollup-plugin-node-resolve": "^2.0.0",
     "rollup-plugin-replace": "^1.1.1",
-    "rollup-plugin-vue": "2.2.8",
-    "rollup-watch": "^2.5.0",
-    "sass-loader": "^4.0.2",
+    "rollup-plugin-vue": "^2.2.15",
+    "rollup-watch": "^3.2.2",
+    "sass-loader": "^4.1.1",
     "style-loader": "^0.13.1",
-    "testcafe": "^0.10.0",
+    "testcafe": "^0.11.1",
     "testcafe-browser-provider-phantomjs": "^1.0.0",
-    "testem": "^1.6.0",
+    "testem": "^1.14.2",
     "uglifyjs": "^2.4.10",
-    "vue": "^2.1.3",
-    "vue-loader": "^10.0.1",
-    "webpack": "^2.1.0-beta.27",
-    "webpack-dev-server": "^2.1.0-beta.11"
+    "vue": "^2.1.8",
+    "vue-loader": "^10.0.2",
+    "webpack": "^2.2.0-rc.3",
+    "webpack-dev-server": "^2.2.0-rc.0"
   }
 }

README.md

@@ -5,6 +5,2 @@ # vue-range-slider
 
-## Requirements
-
-Vue >= 2.0
-
 ## Features
@@ -16,4 +12,87 @@
 
+## Requirements
+
+Vue >= 2.0
+
+## Installation
+
+### NPM
+
+```bash
+npm install --save vue-range-slider
+```
+
+### Yarn
+
+```bash
+yarn add vue-range-slider
+```
+
+## Usage
+
+### Basic Usage
+
+Just import vue-range-slider component and use it in your components. The props are compatible with native `input[type="range"]` element, so you can use `min`, `max`, `step` etc. like native element.
+
+```html
+<template>
+  <range-slider
+    class="slider"
+    min="10"
+    max="1000"
+    step="10"
+    v-model="sliderValue">
+  </range-slider>
+</template>
+
+<script>
+import RangeSlider from 'vue-range-slider'
+// you probably need to import built-in style
+import 'vue-range-slider/dist/vue-range-slider.css'
+
+export default {
+  data () {
+    return {
+      sliderValue: 50
+    }
+  },
+  components: {
+    RangeSlider
+  }
+}
+</script>
+
+<style>
+.slider {
+  /* overwrite slider styles */
+  width: 200px;
+}
+</style>
+```
+
+Available props:
+
+- `name` - name of the slider input.
+- `value` - current value of the slider.
+- `disabled` - if true, the slider value cannot be updated.
+- `min` - minimum value of the slider.
+- `max` - maximum value of the slider.
+- `step` - granularity of the slider value. e.g. if this is 3, the slider value will be 3, 6, 9, ...
+
+### Overwrite Default Styles
+
+vue-range-slider is built with Sass for its styling. If you want to customize vue-range-slider styles, you can easily do that by configuring Sass variables. Available variables can be seen in [the component file](src/RangeSlider.vue).
+
+Example of making the slider knob larger:
+
+```sass
+// set the variable of the knob size
+$knob-size: 30px;
+
+// import the built-in vue-range-slider style
+@import '~vue-range-slider/dist/vue-range-slider.scss';
+```
+
 ## License
 
 MIT

No alert changes

Improved metrics

Total package byte prevSize

26898

increased by6.68%

Number of lines in readme file

97

increased by438.89%

Worsened metrics

Lines of code

522

decreased by-0.76%

No dependency changes