v-range-component - npm Package Compare versions

Comparing version 1.1.3 to 1.1.4

dist/v-range-component.esm.js

@@ -52,2 +52,4 @@ //
 //
+//
+//
 
@@ -69,2 +71,3 @@ var script = {
         dragging: [false, false],
+        steps:[],
       },
@@ -94,2 +97,10 @@ };
     },
+    stepsArray:{
+      type: Array,
+      default: function () { return []; },
+    },
+    showInputs: {
+      type: Boolean,
+      default: function () { return true; },
+    },
     showSteps: {
@@ -108,7 +119,7 @@ type: Boolean,
   },
-  computed: {
-    steps: function steps() {
-      return (this.range[1] - this.range[0]) / this.step;
-    },
-  },
+  // computed: {
+  //   steps() {
+  //     return (this.range[1] + this.range[0]) / this.step;
+  //   },
+  // },
   methods: {
@@ -161,16 +172,23 @@ addEventsToHandlers: function addEventsToHandlers() {
       var relativePosition = position - track.left;
-      var precentage = Math.round((100 * relativePosition) / track.width);
+      var precentage = (100 * relativePosition) / track.width;
       return precentage;
     },
     getPrecentageFromValue: function getPrecentageFromValue(value) {
-      var val =  Math.round((100 * value) / this.range[1]);
-
-      return val;
+      return (100 * this.getClosestValueFromSteps(value)) / (this.range[1]+this.range[0]);
     },
     getValue: function getValue(precentage) {
-      var val = this.logarithmic
-        ? Math.round(precentage * (Math.log(precentage + 1) / Math.log(100)))
-        : precentage;
+      return  this.getClosestValueFromSteps(Math.round(((this.range[1] + this.range[0]) * (precentage / 100))));
+    },
+    getClosestValueFromSteps: function getClosestValueFromSteps(value) {
+      var step = this.params.steps.reduce(function (a, b) {
+          var aDiff = Math.abs(a - value);
+          var bDiff = Math.abs(b - value);
+          if (aDiff == bDiff) {
+              return a > b ? a : b;
+          } else {
+              return bDiff < aDiff ? b : a;
+          }
+      },0);
+      return step;
 
-      return Math.round(this.range[1] * (val / this.steps));
     },
@@ -218,3 +236,2 @@ setHandleByInput: function setHandleByInput() {
       );
-
       this.params.values = this.value;
@@ -230,2 +247,11 @@ this.params.inputValue = [].concat( Object.values(this.params.values) );
     },
+    generateSteps: function generateSteps(){
+      if(this.stepsArray.length > 0) {
+        this.params.steps = this.stepsArray;
+      }else {
+          for (var index = this.range[0]; index <= this.range[1]; index = index+this.step) {
+            this.params.steps.push(index);
+          }
+      }
+    }
   },
@@ -256,2 +282,3 @@ watch: {
         this.initHandlesPositions();
+        this.addEventsToHandlers();
       },
@@ -262,8 +289,17 @@ deep: true,
       handler: function handler() {
+        this.generateSteps();
         this.initHandlesPositions();
+
       },
       deep: true,
     },
+    steps: {
+      handler: function handler() {
+        this.generateSteps();
+        this.initHandlesPositions();
+      },
+      deep:true
+    }
   },
-  mounted: function mounted() {
+  mounted: function mounted(){
     this.slider = this.$refs.rangeSlider;
@@ -275,6 +311,8 @@ this.sliderTrack = this.slider.querySelector(".c-rangeSlider__track");
 
+    this.generateSteps();
     this.initHandlesPositions();
+    this.addEventsToHandlers();
 
-    this.addEventsToHandlers();
-  },
+
+  }
 };
@@ -372,50 +410,56 @@
       _vm._v(" "),
-      _vm._l(_vm.value, function(handle, key) {
-        return [
-          _c(
-            "div",
-            {
-              key: "i" + key,
-              class:
-                "c-rangeSlider__handleInput c-rangeSlider__handleInput--" + key
-            },
-            [
-              _c("input", {
-                directives: [
-                  {
-                    name: "model",
-                    rawName: "v-model",
-                    value: _vm.params.inputValue[key],
-                    expression: "params.inputValue[key]"
+      _vm.showInputs
+        ? _vm._l(_vm.value, function(handle, key) {
+            return _c(
+              "div",
+              {
+                key: "i" + key,
+                class:
+                  "c-rangeSlider__handleInput c-rangeSlider__handleInput--" +
+                  key
+              },
+              [
+                _c("input", {
+                  directives: [
+                    {
+                      name: "model",
+                      rawName: "v-model",
+                      value: _vm.params.inputValue[key],
+                      expression: "params.inputValue[key]"
+                    }
+                  ],
+                  attrs: {
+                    type: "number",
+                    step: _vm.step,
+                    min:
+                      key - 1 < !0 ? _vm.params.values[key - 1] : _vm.range[0],
+                    max:
+                      key + 1 < _vm.params.inputValue.length
+                        ? _vm.params.values[key + 1]
+                        : _vm.range[1]
+                  },
+                  domProps: { value: _vm.params.inputValue[key] },
+                  on: {
+                    input: [
+                      function($event) {
+                        if ($event.target.composing) {
+                          return
+                        }
+                        _vm.$set(
+                          _vm.params.inputValue,
+                          key,
+                          $event.target.value
+                        );
+                      },
+                      function($event) {
+                        return _vm.setHandleByInput()
+                      }
+                    ]
                   }
-                ],
-                attrs: {
-                  type: "number",
-                  step: _vm.step,
-                  min: key - 1 < !0 ? _vm.params.values[key - 1] : _vm.range[0],
-                  max:
-                    key + 1 < _vm.params.inputValue.length
-                      ? _vm.params.values[key + 1]
-                      : _vm.range[1]
-                },
-                domProps: { value: _vm.params.inputValue[key] },
-                on: {
-                  input: [
-                    function($event) {
-                      if ($event.target.composing) {
-                        return
-                      }
-                      _vm.$set(_vm.params.inputValue, key, $event.target.value);
-                    },
-                    function($event) {
-                      return _vm.setHandleByInput()
-                    }
-                  ]
-                }
-              }),
-              _vm._v("\n      " + _vm._s(_vm.unit) + "\n    ")
-            ]
-          )
-        ]
-      }),
+                }),
+                _vm._v("\n      " + _vm._s(_vm.unit) + "\n    ")
+              ]
+            )
+          })
+        : _vm._e(),
       _vm._v(" "),
@@ -449,7 +493,17 @@ _c(
                 { staticClass: "c-rangeSlider__steps" },
-                _vm._l(_vm.steps, function(step) {
-                  return _c("div", {
-                    key: "step" + step,
-                    staticClass: "c-rangeSlider__step"
-                  })
+                _vm._l(_vm.params.steps, function(step) {
+                  return _c(
+                    "div",
+                    {
+                      key: "step" + step,
+                      staticClass: "c-rangeSlider__step",
+                      class: {
+                        "c-rangeSlider__step--active": _vm.params.values.includes(
+                          step
+                        )
+                      },
+                      style: { width: _vm.getPrecentageFromValue(step) + "%" }
+                    },
+                    [_vm._v(_vm._s(step))]
+                  )
                 }),
@@ -456,0 +510,0 @@ 0

dist/v-range-component.min.js

@@ -55,2 +55,4 @@ var VRangeComponent = (function (exports) {
   //
+  //
+  //
 
@@ -72,2 +74,3 @@ var script = {
           dragging: [false, false],
+          steps:[],
         },
@@ -97,2 +100,10 @@ };
       },
+      stepsArray:{
+        type: Array,
+        default: function () { return []; },
+      },
+      showInputs: {
+        type: Boolean,
+        default: function () { return true; },
+      },
       showSteps: {
@@ -111,7 +122,7 @@ type: Boolean,
     },
-    computed: {
-      steps: function steps() {
-        return (this.range[1] - this.range[0]) / this.step;
-      },
-    },
+    // computed: {
+    //   steps() {
+    //     return (this.range[1] + this.range[0]) / this.step;
+    //   },
+    // },
     methods: {
@@ -164,16 +175,23 @@ addEventsToHandlers: function addEventsToHandlers() {
         var relativePosition = position - track.left;
-        var precentage = Math.round((100 * relativePosition) / track.width);
+        var precentage = (100 * relativePosition) / track.width;
         return precentage;
       },
       getPrecentageFromValue: function getPrecentageFromValue(value) {
-        var val =  Math.round((100 * value) / this.range[1]);
-
-        return val;
+        return (100 * this.getClosestValueFromSteps(value)) / (this.range[1]+this.range[0]);
       },
       getValue: function getValue(precentage) {
-        var val = this.logarithmic
-          ? Math.round(precentage * (Math.log(precentage + 1) / Math.log(100)))
-          : precentage;
+        return  this.getClosestValueFromSteps(Math.round(((this.range[1] + this.range[0]) * (precentage / 100))));
+      },
+      getClosestValueFromSteps: function getClosestValueFromSteps(value) {
+        var step = this.params.steps.reduce(function (a, b) {
+            var aDiff = Math.abs(a - value);
+            var bDiff = Math.abs(b - value);
+            if (aDiff == bDiff) {
+                return a > b ? a : b;
+            } else {
+                return bDiff < aDiff ? b : a;
+            }
+        },0);
+        return step;
 
-        return Math.round(this.range[1] * (val / this.steps));
       },
@@ -221,3 +239,2 @@ setHandleByInput: function setHandleByInput() {
         );
-
         this.params.values = this.value;
@@ -233,2 +250,11 @@ this.params.inputValue = [].concat( Object.values(this.params.values) );
       },
+      generateSteps: function generateSteps(){
+        if(this.stepsArray.length > 0) {
+          this.params.steps = this.stepsArray;
+        }else {
+            for (var index = this.range[0]; index <= this.range[1]; index = index+this.step) {
+              this.params.steps.push(index);
+            }
+        }
+      }
     },
@@ -259,2 +285,3 @@ watch: {
           this.initHandlesPositions();
+          this.addEventsToHandlers();
         },
@@ -265,8 +292,17 @@ deep: true,
         handler: function handler() {
+          this.generateSteps();
           this.initHandlesPositions();
+
         },
         deep: true,
       },
+      steps: {
+        handler: function handler() {
+          this.generateSteps();
+          this.initHandlesPositions();
+        },
+        deep:true
+      }
     },
-    mounted: function mounted() {
+    mounted: function mounted(){
       this.slider = this.$refs.rangeSlider;
@@ -278,6 +314,8 @@ this.sliderTrack = this.slider.querySelector(".c-rangeSlider__track");
 
+      this.generateSteps();
       this.initHandlesPositions();
+      this.addEventsToHandlers();
 
-      this.addEventsToHandlers();
-    },
+
+    }
   };
@@ -375,50 +413,56 @@
         _vm._v(" "),
-        _vm._l(_vm.value, function(handle, key) {
-          return [
-            _c(
-              "div",
-              {
-                key: "i" + key,
-                class:
-                  "c-rangeSlider__handleInput c-rangeSlider__handleInput--" + key
-              },
-              [
-                _c("input", {
-                  directives: [
-                    {
-                      name: "model",
-                      rawName: "v-model",
-                      value: _vm.params.inputValue[key],
-                      expression: "params.inputValue[key]"
+        _vm.showInputs
+          ? _vm._l(_vm.value, function(handle, key) {
+              return _c(
+                "div",
+                {
+                  key: "i" + key,
+                  class:
+                    "c-rangeSlider__handleInput c-rangeSlider__handleInput--" +
+                    key
+                },
+                [
+                  _c("input", {
+                    directives: [
+                      {
+                        name: "model",
+                        rawName: "v-model",
+                        value: _vm.params.inputValue[key],
+                        expression: "params.inputValue[key]"
+                      }
+                    ],
+                    attrs: {
+                      type: "number",
+                      step: _vm.step,
+                      min:
+                        key - 1 < !0 ? _vm.params.values[key - 1] : _vm.range[0],
+                      max:
+                        key + 1 < _vm.params.inputValue.length
+                          ? _vm.params.values[key + 1]
+                          : _vm.range[1]
+                    },
+                    domProps: { value: _vm.params.inputValue[key] },
+                    on: {
+                      input: [
+                        function($event) {
+                          if ($event.target.composing) {
+                            return
+                          }
+                          _vm.$set(
+                            _vm.params.inputValue,
+                            key,
+                            $event.target.value
+                          );
+                        },
+                        function($event) {
+                          return _vm.setHandleByInput()
+                        }
+                      ]
                     }
-                  ],
-                  attrs: {
-                    type: "number",
-                    step: _vm.step,
-                    min: key - 1 < !0 ? _vm.params.values[key - 1] : _vm.range[0],
-                    max:
-                      key + 1 < _vm.params.inputValue.length
-                        ? _vm.params.values[key + 1]
-                        : _vm.range[1]
-                  },
-                  domProps: { value: _vm.params.inputValue[key] },
-                  on: {
-                    input: [
-                      function($event) {
-                        if ($event.target.composing) {
-                          return
-                        }
-                        _vm.$set(_vm.params.inputValue, key, $event.target.value);
-                      },
-                      function($event) {
-                        return _vm.setHandleByInput()
-                      }
-                    ]
-                  }
-                }),
-                _vm._v("\n      " + _vm._s(_vm.unit) + "\n    ")
-              ]
-            )
-          ]
-        }),
+                  }),
+                  _vm._v("\n      " + _vm._s(_vm.unit) + "\n    ")
+                ]
+              )
+            })
+          : _vm._e(),
         _vm._v(" "),
@@ -452,7 +496,17 @@ _c(
                   { staticClass: "c-rangeSlider__steps" },
-                  _vm._l(_vm.steps, function(step) {
-                    return _c("div", {
-                      key: "step" + step,
-                      staticClass: "c-rangeSlider__step"
-                    })
+                  _vm._l(_vm.params.steps, function(step) {
+                    return _c(
+                      "div",
+                      {
+                        key: "step" + step,
+                        staticClass: "c-rangeSlider__step",
+                        class: {
+                          "c-rangeSlider__step--active": _vm.params.values.includes(
+                            step
+                          )
+                        },
+                        style: { width: _vm.getPrecentageFromValue(step) + "%" }
+                      },
+                      [_vm._v(_vm._s(step))]
+                    )
                   }),
@@ -459,0 +513,0 @@ 0

dist/v-range-component.umd.js

@@ -58,2 +58,4 @@ (function (global, factory) {
   //
+  //
+  //
 
@@ -75,2 +77,3 @@ var script = {
           dragging: [false, false],
+          steps:[],
         },
@@ -100,2 +103,10 @@ };
       },
+      stepsArray:{
+        type: Array,
+        default: function () { return []; },
+      },
+      showInputs: {
+        type: Boolean,
+        default: function () { return true; },
+      },
       showSteps: {
@@ -114,7 +125,7 @@ type: Boolean,
     },
-    computed: {
-      steps: function steps() {
-        return (this.range[1] - this.range[0]) / this.step;
-      },
-    },
+    // computed: {
+    //   steps() {
+    //     return (this.range[1] + this.range[0]) / this.step;
+    //   },
+    // },
     methods: {
@@ -167,16 +178,23 @@ addEventsToHandlers: function addEventsToHandlers() {
         var relativePosition = position - track.left;
-        var precentage = Math.round((100 * relativePosition) / track.width);
+        var precentage = (100 * relativePosition) / track.width;
         return precentage;
       },
       getPrecentageFromValue: function getPrecentageFromValue(value) {
-        var val =  Math.round((100 * value) / this.range[1]);
-
-        return val;
+        return (100 * this.getClosestValueFromSteps(value)) / (this.range[1]+this.range[0]);
       },
       getValue: function getValue(precentage) {
-        var val = this.logarithmic
-          ? Math.round(precentage * (Math.log(precentage + 1) / Math.log(100)))
-          : precentage;
+        return  this.getClosestValueFromSteps(Math.round(((this.range[1] + this.range[0]) * (precentage / 100))));
+      },
+      getClosestValueFromSteps: function getClosestValueFromSteps(value) {
+        var step = this.params.steps.reduce(function (a, b) {
+            var aDiff = Math.abs(a - value);
+            var bDiff = Math.abs(b - value);
+            if (aDiff == bDiff) {
+                return a > b ? a : b;
+            } else {
+                return bDiff < aDiff ? b : a;
+            }
+        },0);
+        return step;
 
-        return Math.round(this.range[1] * (val / this.steps));
       },
@@ -224,3 +242,2 @@ setHandleByInput: function setHandleByInput() {
         );
-
         this.params.values = this.value;
@@ -236,2 +253,11 @@ this.params.inputValue = [].concat( Object.values(this.params.values) );
       },
+      generateSteps: function generateSteps(){
+        if(this.stepsArray.length > 0) {
+          this.params.steps = this.stepsArray;
+        }else {
+            for (var index = this.range[0]; index <= this.range[1]; index = index+this.step) {
+              this.params.steps.push(index);
+            }
+        }
+      }
     },
@@ -262,2 +288,3 @@ watch: {
           this.initHandlesPositions();
+          this.addEventsToHandlers();
         },
@@ -268,8 +295,17 @@ deep: true,
         handler: function handler() {
+          this.generateSteps();
           this.initHandlesPositions();
+
         },
         deep: true,
       },
+      steps: {
+        handler: function handler() {
+          this.generateSteps();
+          this.initHandlesPositions();
+        },
+        deep:true
+      }
     },
-    mounted: function mounted() {
+    mounted: function mounted(){
       this.slider = this.$refs.rangeSlider;
@@ -281,6 +317,8 @@ this.sliderTrack = this.slider.querySelector(".c-rangeSlider__track");
 
+      this.generateSteps();
       this.initHandlesPositions();
+      this.addEventsToHandlers();
 
-      this.addEventsToHandlers();
-    },
+
+    }
   };
@@ -378,50 +416,56 @@
         _vm._v(" "),
-        _vm._l(_vm.value, function(handle, key) {
-          return [
-            _c(
-              "div",
-              {
-                key: "i" + key,
-                class:
-                  "c-rangeSlider__handleInput c-rangeSlider__handleInput--" + key
-              },
-              [
-                _c("input", {
-                  directives: [
-                    {
-                      name: "model",
-                      rawName: "v-model",
-                      value: _vm.params.inputValue[key],
-                      expression: "params.inputValue[key]"
+        _vm.showInputs
+          ? _vm._l(_vm.value, function(handle, key) {
+              return _c(
+                "div",
+                {
+                  key: "i" + key,
+                  class:
+                    "c-rangeSlider__handleInput c-rangeSlider__handleInput--" +
+                    key
+                },
+                [
+                  _c("input", {
+                    directives: [
+                      {
+                        name: "model",
+                        rawName: "v-model",
+                        value: _vm.params.inputValue[key],
+                        expression: "params.inputValue[key]"
+                      }
+                    ],
+                    attrs: {
+                      type: "number",
+                      step: _vm.step,
+                      min:
+                        key - 1 < !0 ? _vm.params.values[key - 1] : _vm.range[0],
+                      max:
+                        key + 1 < _vm.params.inputValue.length
+                          ? _vm.params.values[key + 1]
+                          : _vm.range[1]
+                    },
+                    domProps: { value: _vm.params.inputValue[key] },
+                    on: {
+                      input: [
+                        function($event) {
+                          if ($event.target.composing) {
+                            return
+                          }
+                          _vm.$set(
+                            _vm.params.inputValue,
+                            key,
+                            $event.target.value
+                          );
+                        },
+                        function($event) {
+                          return _vm.setHandleByInput()
+                        }
+                      ]
                     }
-                  ],
-                  attrs: {
-                    type: "number",
-                    step: _vm.step,
-                    min: key - 1 < !0 ? _vm.params.values[key - 1] : _vm.range[0],
-                    max:
-                      key + 1 < _vm.params.inputValue.length
-                        ? _vm.params.values[key + 1]
-                        : _vm.range[1]
-                  },
-                  domProps: { value: _vm.params.inputValue[key] },
-                  on: {
-                    input: [
-                      function($event) {
-                        if ($event.target.composing) {
-                          return
-                        }
-                        _vm.$set(_vm.params.inputValue, key, $event.target.value);
-                      },
-                      function($event) {
-                        return _vm.setHandleByInput()
-                      }
-                    ]
-                  }
-                }),
-                _vm._v("\n      " + _vm._s(_vm.unit) + "\n    ")
-              ]
-            )
-          ]
-        }),
+                  }),
+                  _vm._v("\n      " + _vm._s(_vm.unit) + "\n    ")
+                ]
+              )
+            })
+          : _vm._e(),
         _vm._v(" "),
@@ -455,7 +499,17 @@ _c(
                   { staticClass: "c-rangeSlider__steps" },
-                  _vm._l(_vm.steps, function(step) {
-                    return _c("div", {
-                      key: "step" + step,
-                      staticClass: "c-rangeSlider__step"
-                    })
+                  _vm._l(_vm.params.steps, function(step) {
+                    return _c(
+                      "div",
+                      {
+                        key: "step" + step,
+                        staticClass: "c-rangeSlider__step",
+                        class: {
+                          "c-rangeSlider__step--active": _vm.params.values.includes(
+                            step
+                          )
+                        },
+                        style: { width: _vm.getPrecentageFromValue(step) + "%" }
+                      },
+                      [_vm._v(_vm._s(step))]
+                    )
                   }),
@@ -462,0 +516,0 @@ 0

package.json

 {
   "name": "v-range-component",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "description": "Vue Range Slider component",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -32,3 +32,5 @@ # vRange Component
 | showSteps | Boolean | false | That option generates div for each step that may be used for show track step points |
+| showInputs | Boolean | true | Show input fields |
+| stepsArray | Array | [] | Steps values. As default will generate array from 'step' and max range value |
 | lazy | Number | 500 | Delay (ms) before emit value by component after change |
 | logarithmic | Boolean | false| Makes values growth logarithmic |

No alert changes

Improved metrics

Total package byte prevSize

55847

increased by11.21%

Lines of code

1728

increased by10.34%

Number of lines in readme file

36

increased by5.88%

No dependency changes