diff --git a/dist/vue-slider-with-indicator.esm.js b/dist/vue-slider-with-indicator.esm.js
index fca2d1e..7416550 100644
--- a/dist/vue-slider-with-indicator.esm.js
+++ b/dist/vue-slider-with-indicator.esm.js
@@ -27,7 +27,7 @@ var script = {
   data: function data () {
     return {
       settings: {
-        init: 20,
+        init: 50,
         max: 100,
         min: 0,
         step: 1,
@@ -48,14 +48,18 @@ var script = {
     }
   },
   props: {
-    sliderValue: [Number, String],
-    indicatorValue: [Number, String],
+    sliderValue: Number,
+    indicatorValue: Number,
     options: Object
   },
   computed: {
     calculatedSliderValue: {
       get: function get () {
-        return this.sliderValue || this.settings.init
+        var valueOrDefault =
+          this.sliderValue === 'undefined'
+          ? this.settings.init
+          : this.sliderValue;
+        return valueOrDefault
       },
       set: function set (val) {
         this.$emit('input', val);
@@ -100,6 +104,14 @@ var script = {
     }
   },
   mounted: function mounted () {
+
+    if (isNaN(this.sliderValue)) {
+      console.error(("Expected Number for 'sliderValue', instead got " + (this.sliderValue) + "."));
+    }
+    if (isNaN(this.indicatorValue)) {
+      console.error(("Expected Number for 'indicatorValue', instead got " + (this.indicatorValue) + "."));
+    }
+
     if (this.options) {
       for (var opt in this.options) {
         if (opt !== 'style') {
@@ -318,11 +330,11 @@ __vue_render__._withStripped = true;
   /* style */
   var __vue_inject_styles__ = function (inject) {
     if (!inject) { return }
-    inject("data-v-36c2bb0b_0", { source: "\n.slider-container[data-v-36c2bb0b] {\n  width: var(--sliderWidth);\n  height: var(--sliderHeight);\n  display: flex;\n}\n\n/* From:\nhttps://www.w3schools.com/howto/howto_js_rangeslider.asp */\n.slider[data-v-36c2bb0b] {\n  -webkit-appearance: none;\n  appearance: none;\n  width: var(--sliderWidth);\n  height: var(--sliderHeight);\n  background-color: var(--backgroundColor);\n  transform-origin: var(--transformOrigin);\n  transform: var(--rotation);\n  direction: var(--direction);\n}\n.synth-slider[data-v-36c2bb0b]::-webkit-slider-thumb {\n  -webkit-appearance: none; /* Override default look */\n  appearance: none;\n  width: var(--handleWidth); /* Set a specific slider handle width */\n  height: var(--handleHeight); /* Slider handle height */\n  background-color: var(--handleColor); /* Green background */\n  border: none;\n  border-radius: 0;\n  cursor: pointer; /* Cursor on hover */\n}\n.synth-slider[data-v-36c2bb0b]::-moz-range-thumb {\n  width: var(--handleWidth); /* Set a specific slider handle width */\n  height: var(--handleHeight); /* Slider handle height */\n  background-color: var(--handleColor); /* Green background */\n  border: none;\n  border-radius: 0;\n  cursor: pointer; /* Cursor on hover */\n}\n.modulation-indicator[data-v-36c2bb0b] {\n  position: absolute;\n  background: none;\n  pointer-events: none;\n}\n.modulation-indicator[data-v-36c2bb0b]::-webkit-slider-thumb {\n  -webkit-appearance: none; /* Override default look */\n  appearance: none;\n  width: var(--indicatorWidth); /* Set a specific slider handle width */\n  height: var(--indicatorHeight); /* Slider handle height */\n  background-color: var(--indicatorColor);\n  border: none;\n  border-radius: 0;\n}\n.modulation-indicator[data-v-36c2bb0b]::-moz-range-thumb {\n  width: var(--indicatorWidth); /* Set a specific slider handle width */\n  height: var(--indicatorHeight); /* Slider handle height */\n  background: var(--indicatorColor);\n  border: none;\n  border-radius: 0;\n}\n\n", map: {"version":3,"sources":["D:\\projects\\npm\\VueSliderWithIndicator\\src\\VueSliderWithIndicator.vue"],"names":[],"mappings":";AA6HA;EACA,yBAAA;EACA,2BAAA;EACA,aAAA;AACA;;AAEA;0DACA;AACA;EACA,wBAAA;EACA,gBAAA;EACA,yBAAA;EACA,2BAAA;EACA,wCAAA;EACA,wCAAA;EACA,0BAAA;EACA,2BAAA;AACA;AAEA;EACA,wBAAA,EAAA,0BAAA;EACA,gBAAA;EACA,yBAAA,EAAA,uCAAA;EACA,2BAAA,EAAA,yBAAA;EACA,oCAAA,EAAA,qBAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA,EAAA,oBAAA;AACA;AAEA;EACA,yBAAA,EAAA,uCAAA;EACA,2BAAA,EAAA,yBAAA;EACA,oCAAA,EAAA,qBAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA,EAAA,oBAAA;AACA;AAEA;EACA,kBAAA;EACA,gBAAA;EACA,oBAAA;AACA;AAEA;EACA,wBAAA,EAAA,0BAAA;EACA,gBAAA;EACA,4BAAA,EAAA,uCAAA;EACA,8BAAA,EAAA,yBAAA;EACA,uCAAA;EACA,YAAA;EACA,gBAAA;AACA;AAEA;EACA,4BAAA,EAAA,uCAAA;EACA,8BAAA,EAAA,yBAAA;EACA,iCAAA;EACA,YAAA;EACA,gBAAA;AACA","file":"VueSliderWithIndicator.vue","sourcesContent":["<template>\n  <div class=\"slider-container\" :style=\"containerStyle\">\n    <input\n      type=\"range\"\n      class=\"slider synth-slider\"\n      :style=\"sliderStyle\"\n      :max=\"settings.max\"\n      :min=\"settings.min\"\n      :step=\"settings.step\"\n      v-model=\"calculatedSliderValue\"\n    >\n    <input\n      type=\"range\"\n      class=\"slider modulation-indicator\"\n      :style=\"indicatorStyle\"\n      :max=\"settings.max\"\n      :min=\"settings.min\"\n      :step=\"settings.step\"\n      v-model=\"indicatorValue\"\n    >\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'VueSliderWithIndicator',\n  data () {\n    return {\n      settings: {\n        init: 20,\n        max: 100,\n        min: 0,\n        step: 1,\n        style: {\n          vertical: false,\n          direction: 'ltr',\n          sliderWidth: '500px',\n          sliderHeight: '50px',\n          backgroundColor: 'black',\n          handleWidth: '50px',\n          handleHeight: '50px',\n          handleColor: '#4CAF50',\n          indicatorWidth: '5px',\n          indicatorHeight: '50px',\n          indicatorColor: 'rgba(255, 136, 0, 0.7)'\n        }\n      }\n    }\n  },\n  props: {\n    sliderValue: [Number, String],\n    indicatorValue: [Number, String],\n    options: Object\n  },\n  computed: {\n    calculatedSliderValue: {\n      get () {\n        return this.sliderValue || this.settings.init\n      },\n      set (val) {\n        this.$emit('input', val)\n      }\n    },\n    // Setting up CSS variables from the values of the style object.\n    // Necessary because pseudo elements like the handle can't be\n    // accessed inline.\n    containerStyle () {\n      let transformOrigin = null\n      let rotation = null\n      if (this.settings.style.vertical) {\n        const sliderWidth = this.settings.style.sliderWidth\n        const widthValue = sliderWidth.match(/\\d+/g)[0]\n        const widthUnit = sliderWidth.slice(sliderWidth.match(/\\d+/g)[0].length)\n        transformOrigin = `${widthValue / 2 + widthUnit} ${widthValue / 2 + widthUnit}`\n        rotation = 'rotate(-90deg)'\n      }\n\n      return {\n        '--sliderWidth': this.settings.style.sliderWidth,\n        '--sliderHeight': this.settings.style.sliderHeight,\n        '--backgroundColor': this.settings.style.backgroundColor,\n        '--transformOrigin': transformOrigin,\n        '--rotation': rotation,\n        '--direction': this.settings.style.direction\n      }\n    },\n    sliderStyle () {\n      return {\n        '--handleWidth': this.settings.style.handleWidth,\n        '--handleHeight': this.settings.style.handleHeight,\n        '--handleColor': this.settings.style.handleColor\n      }\n    },\n    indicatorStyle () {\n      return {\n        '--indicatorWidth': this.settings.style.indicatorWidth,\n        '--indicatorHeight': this.settings.style.indicatorHeight,\n        '--indicatorColor': this.settings.style.indicatorColor\n      }\n    }\n  },\n  mounted () {\n    if (this.options) {\n      for (let opt in this.options) {\n        if (opt !== 'style') {\n          this.settings[opt] = this.options[opt]\n        }\n      }\n      // If sliderHeight is set, make handle and indicator take up full height\n      if (this.options.style) {\n        if (Object.keys(this.options.style).includes('sliderHeight')) {\n          this.settings.style.handleHeight = this.options.style['sliderHeight']\n          this.settings.style.indicatorHeight = this.options.style['sliderHeight']\n        }\n        for (let styling in this.options.style) {\n          this.settings.style[styling] = this.options.style[styling]\n        }\n      }\n    }\n  }\n}\n</script>\n\n<!-- Add \"scoped\" attribute to limit CSS to this component only -->\n<style scoped>\n.slider-container {\n  width: var(--sliderWidth);\n  height: var(--sliderHeight);\n  display: flex;\n}\n\n/* From:\nhttps://www.w3schools.com/howto/howto_js_rangeslider.asp */\n.slider {\n  -webkit-appearance: none;\n  appearance: none;\n  width: var(--sliderWidth);\n  height: var(--sliderHeight);\n  background-color: var(--backgroundColor);\n  transform-origin: var(--transformOrigin);\n  transform: var(--rotation);\n  direction: var(--direction);\n}\n\n.synth-slider::-webkit-slider-thumb {\n  -webkit-appearance: none; /* Override default look */\n  appearance: none;\n  width: var(--handleWidth); /* Set a specific slider handle width */\n  height: var(--handleHeight); /* Slider handle height */\n  background-color: var(--handleColor); /* Green background */\n  border: none;\n  border-radius: 0;\n  cursor: pointer; /* Cursor on hover */\n}\n\n.synth-slider::-moz-range-thumb {\n  width: var(--handleWidth); /* Set a specific slider handle width */\n  height: var(--handleHeight); /* Slider handle height */\n  background-color: var(--handleColor); /* Green background */\n  border: none;\n  border-radius: 0;\n  cursor: pointer; /* Cursor on hover */\n}\n\n.modulation-indicator {\n  position: absolute;\n  background: none;\n  pointer-events: none;\n}\n\n.modulation-indicator::-webkit-slider-thumb {\n  -webkit-appearance: none; /* Override default look */\n  appearance: none;\n  width: var(--indicatorWidth); /* Set a specific slider handle width */\n  height: var(--indicatorHeight); /* Slider handle height */\n  background-color: var(--indicatorColor);\n  border: none;\n  border-radius: 0;\n}\n\n.modulation-indicator::-moz-range-thumb {\n  width: var(--indicatorWidth); /* Set a specific slider handle width */\n  height: var(--indicatorHeight); /* Slider handle height */\n  background: var(--indicatorColor);\n  border: none;\n  border-radius: 0;\n}\n\n</style>\n"]}, media: undefined });
+    inject("data-v-909eb764_0", { source: "\n.slider-container[data-v-909eb764] {\n  width: var(--sliderWidth);\n  height: var(--sliderHeight);\n  display: flex;\n}\n\n/* From:\nhttps://www.w3schools.com/howto/howto_js_rangeslider.asp */\n.slider[data-v-909eb764] {\n  -webkit-appearance: none;\n  appearance: none;\n  width: var(--sliderWidth);\n  height: var(--sliderHeight);\n  background-color: var(--backgroundColor);\n  transform-origin: var(--transformOrigin);\n  transform: var(--rotation);\n  direction: var(--direction);\n}\n.synth-slider[data-v-909eb764]::-webkit-slider-thumb {\n  -webkit-appearance: none; /* Override default look */\n  appearance: none;\n  width: var(--handleWidth); /* Set a specific slider handle width */\n  height: var(--handleHeight); /* Slider handle height */\n  background-color: var(--handleColor); /* Green background */\n  border: none;\n  border-radius: 0;\n  cursor: pointer; /* Cursor on hover */\n}\n.synth-slider[data-v-909eb764]::-moz-range-thumb {\n  width: var(--handleWidth); /* Set a specific slider handle width */\n  height: var(--handleHeight); /* Slider handle height */\n  background-color: var(--handleColor); /* Green background */\n  border: none;\n  border-radius: 0;\n  cursor: pointer; /* Cursor on hover */\n}\n.modulation-indicator[data-v-909eb764] {\n  position: absolute;\n  background: none;\n  pointer-events: none;\n}\n.modulation-indicator[data-v-909eb764]::-webkit-slider-thumb {\n  -webkit-appearance: none; /* Override default look */\n  appearance: none;\n  width: var(--indicatorWidth); /* Set a specific slider handle width */\n  height: var(--indicatorHeight); /* Slider handle height */\n  background-color: var(--indicatorColor);\n  border: none;\n  border-radius: 0;\n}\n.modulation-indicator[data-v-909eb764]::-moz-range-thumb {\n  width: var(--indicatorWidth); /* Set a specific slider handle width */\n  height: var(--indicatorHeight); /* Slider handle height */\n  background: var(--indicatorColor);\n  border: none;\n  border-radius: 0;\n}\n\n", map: {"version":3,"sources":["D:\\projects\\npm\\VueSliderWithIndicator\\src\\VueSliderWithIndicator.vue"],"names":[],"mappings":";AAyIA;EACA,yBAAA;EACA,2BAAA;EACA,aAAA;AACA;;AAEA;0DACA;AACA;EACA,wBAAA;EACA,gBAAA;EACA,yBAAA;EACA,2BAAA;EACA,wCAAA;EACA,wCAAA;EACA,0BAAA;EACA,2BAAA;AACA;AAEA;EACA,wBAAA,EAAA,0BAAA;EACA,gBAAA;EACA,yBAAA,EAAA,uCAAA;EACA,2BAAA,EAAA,yBAAA;EACA,oCAAA,EAAA,qBAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA,EAAA,oBAAA;AACA;AAEA;EACA,yBAAA,EAAA,uCAAA;EACA,2BAAA,EAAA,yBAAA;EACA,oCAAA,EAAA,qBAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA,EAAA,oBAAA;AACA;AAEA;EACA,kBAAA;EACA,gBAAA;EACA,oBAAA;AACA;AAEA;EACA,wBAAA,EAAA,0BAAA;EACA,gBAAA;EACA,4BAAA,EAAA,uCAAA;EACA,8BAAA,EAAA,yBAAA;EACA,uCAAA;EACA,YAAA;EACA,gBAAA;AACA;AAEA;EACA,4BAAA,EAAA,uCAAA;EACA,8BAAA,EAAA,yBAAA;EACA,iCAAA;EACA,YAAA;EACA,gBAAA;AACA","file":"VueSliderWithIndicator.vue","sourcesContent":["<template>\n  <div class=\"slider-container\" :style=\"containerStyle\">\n    <input\n      type=\"range\"\n      class=\"slider synth-slider\"\n      :style=\"sliderStyle\"\n      :max=\"settings.max\"\n      :min=\"settings.min\"\n      :step=\"settings.step\"\n      v-model=\"calculatedSliderValue\"\n    >\n    <input\n      type=\"range\"\n      class=\"slider modulation-indicator\"\n      :style=\"indicatorStyle\"\n      :max=\"settings.max\"\n      :min=\"settings.min\"\n      :step=\"settings.step\"\n      v-model=\"indicatorValue\"\n    >\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'VueSliderWithIndicator',\n  data () {\n    return {\n      settings: {\n        init: 50,\n        max: 100,\n        min: 0,\n        step: 1,\n        style: {\n          vertical: false,\n          direction: 'ltr',\n          sliderWidth: '500px',\n          sliderHeight: '50px',\n          backgroundColor: 'black',\n          handleWidth: '50px',\n          handleHeight: '50px',\n          handleColor: '#4CAF50',\n          indicatorWidth: '5px',\n          indicatorHeight: '50px',\n          indicatorColor: 'rgba(255, 136, 0, 0.7)'\n        }\n      }\n    }\n  },\n  props: {\n    sliderValue: Number,\n    indicatorValue: Number,\n    options: Object\n  },\n  computed: {\n    calculatedSliderValue: {\n      get () {\n        const valueOrDefault =\n          this.sliderValue === 'undefined'\n          ? this.settings.init\n          : this.sliderValue\n        return valueOrDefault\n      },\n      set (val) {\n        this.$emit('input', val)\n      }\n    },\n    // Setting up CSS variables from the values of the style object.\n    // Necessary because pseudo elements like the handle can't be\n    // accessed inline.\n    containerStyle () {\n      let transformOrigin = null\n      let rotation = null\n      if (this.settings.style.vertical) {\n        const sliderWidth = this.settings.style.sliderWidth\n        const widthValue = sliderWidth.match(/\\d+/g)[0]\n        const widthUnit = sliderWidth.slice(sliderWidth.match(/\\d+/g)[0].length)\n        transformOrigin = `${widthValue / 2 + widthUnit} ${widthValue / 2 + widthUnit}`\n        rotation = 'rotate(-90deg)'\n      }\n\n      return {\n        '--sliderWidth': this.settings.style.sliderWidth,\n        '--sliderHeight': this.settings.style.sliderHeight,\n        '--backgroundColor': this.settings.style.backgroundColor,\n        '--transformOrigin': transformOrigin,\n        '--rotation': rotation,\n        '--direction': this.settings.style.direction\n      }\n    },\n    sliderStyle () {\n      return {\n        '--handleWidth': this.settings.style.handleWidth,\n        '--handleHeight': this.settings.style.handleHeight,\n        '--handleColor': this.settings.style.handleColor\n      }\n    },\n    indicatorStyle () {\n      return {\n        '--indicatorWidth': this.settings.style.indicatorWidth,\n        '--indicatorHeight': this.settings.style.indicatorHeight,\n        '--indicatorColor': this.settings.style.indicatorColor\n      }\n    }\n  },\n  mounted () {\n\n    if (isNaN(this.sliderValue)) {\n      console.error(`Expected Number for 'sliderValue', instead got ${this.sliderValue}.`)\n    }\n    if (isNaN(this.indicatorValue)) {\n      console.error(`Expected Number for 'indicatorValue', instead got ${this.indicatorValue}.`)\n    }\n\n    if (this.options) {\n      for (let opt in this.options) {\n        if (opt !== 'style') {\n          this.settings[opt] = this.options[opt]\n        }\n      }\n      // If sliderHeight is set, make handle and indicator take up full height\n      if (this.options.style) {\n        if (Object.keys(this.options.style).includes('sliderHeight')) {\n          this.settings.style.handleHeight = this.options.style['sliderHeight']\n          this.settings.style.indicatorHeight = this.options.style['sliderHeight']\n        }\n        for (let styling in this.options.style) {\n          this.settings.style[styling] = this.options.style[styling]\n        }\n      }\n    }\n  }\n}\n</script>\n\n<!-- Add \"scoped\" attribute to limit CSS to this component only -->\n<style scoped>\n.slider-container {\n  width: var(--sliderWidth);\n  height: var(--sliderHeight);\n  display: flex;\n}\n\n/* From:\nhttps://www.w3schools.com/howto/howto_js_rangeslider.asp */\n.slider {\n  -webkit-appearance: none;\n  appearance: none;\n  width: var(--sliderWidth);\n  height: var(--sliderHeight);\n  background-color: var(--backgroundColor);\n  transform-origin: var(--transformOrigin);\n  transform: var(--rotation);\n  direction: var(--direction);\n}\n\n.synth-slider::-webkit-slider-thumb {\n  -webkit-appearance: none; /* Override default look */\n  appearance: none;\n  width: var(--handleWidth); /* Set a specific slider handle width */\n  height: var(--handleHeight); /* Slider handle height */\n  background-color: var(--handleColor); /* Green background */\n  border: none;\n  border-radius: 0;\n  cursor: pointer; /* Cursor on hover */\n}\n\n.synth-slider::-moz-range-thumb {\n  width: var(--handleWidth); /* Set a specific slider handle width */\n  height: var(--handleHeight); /* Slider handle height */\n  background-color: var(--handleColor); /* Green background */\n  border: none;\n  border-radius: 0;\n  cursor: pointer; /* Cursor on hover */\n}\n\n.modulation-indicator {\n  position: absolute;\n  background: none;\n  pointer-events: none;\n}\n\n.modulation-indicator::-webkit-slider-thumb {\n  -webkit-appearance: none; /* Override default look */\n  appearance: none;\n  width: var(--indicatorWidth); /* Set a specific slider handle width */\n  height: var(--indicatorHeight); /* Slider handle height */\n  background-color: var(--indicatorColor);\n  border: none;\n  border-radius: 0;\n}\n\n.modulation-indicator::-moz-range-thumb {\n  width: var(--indicatorWidth); /* Set a specific slider handle width */\n  height: var(--indicatorHeight); /* Slider handle height */\n  background: var(--indicatorColor);\n  border: none;\n  border-radius: 0;\n}\n\n</style>\n"]}, media: undefined });
 
   };
   /* scoped */
-  var __vue_scope_id__ = "data-v-36c2bb0b";
+  var __vue_scope_id__ = "data-v-909eb764";
   /* module identifier */
   var __vue_module_identifier__ = undefined;
   /* functional template */
diff --git a/dist/vue-slider-with-indicator.min.js b/dist/vue-slider-with-indicator.min.js
index 5086169..797cb20 100644
--- a/dist/vue-slider-with-indicator.min.js
+++ b/dist/vue-slider-with-indicator.min.js
@@ -30,7 +30,7 @@ var VueSliderWithIndicator = (function (exports) {
     data: function data () {
       return {
         settings: {
-          init: 20,
+          init: 50,
           max: 100,
           min: 0,
           step: 1,
@@ -51,14 +51,18 @@ var VueSliderWithIndicator = (function (exports) {
       }
     },
     props: {
-      sliderValue: [Number, String],
-      indicatorValue: [Number, String],
+      sliderValue: Number,
+      indicatorValue: Number,
       options: Object
     },
     computed: {
       calculatedSliderValue: {
         get: function get () {
-          return this.sliderValue || this.settings.init
+          var valueOrDefault =
+            this.sliderValue === 'undefined'
+            ? this.settings.init
+            : this.sliderValue;
+          return valueOrDefault
         },
         set: function set (val) {
           this.$emit('input', val);
@@ -103,6 +107,14 @@ var VueSliderWithIndicator = (function (exports) {
       }
     },
     mounted: function mounted () {
+
+      if (isNaN(this.sliderValue)) {
+        console.error(("Expected Number for 'sliderValue', instead got " + (this.sliderValue) + "."));
+      }
+      if (isNaN(this.indicatorValue)) {
+        console.error(("Expected Number for 'indicatorValue', instead got " + (this.indicatorValue) + "."));
+      }
+
       if (this.options) {
         for (var opt in this.options) {
           if (opt !== 'style') {
@@ -321,11 +333,11 @@ var VueSliderWithIndicator = (function (exports) {
     /* style */
     var __vue_inject_styles__ = function (inject) {
       if (!inject) { return }
-      inject("data-v-36c2bb0b_0", { source: "\n.slider-container[data-v-36c2bb0b] {\n  width: var(--sliderWidth);\n  height: var(--sliderHeight);\n  display: flex;\n}\n\n/* From:\nhttps://www.w3schools.com/howto/howto_js_rangeslider.asp */\n.slider[data-v-36c2bb0b] {\n  -webkit-appearance: none;\n  appearance: none;\n  width: var(--sliderWidth);\n  height: var(--sliderHeight);\n  background-color: var(--backgroundColor);\n  transform-origin: var(--transformOrigin);\n  transform: var(--rotation);\n  direction: var(--direction);\n}\n.synth-slider[data-v-36c2bb0b]::-webkit-slider-thumb {\n  -webkit-appearance: none; /* Override default look */\n  appearance: none;\n  width: var(--handleWidth); /* Set a specific slider handle width */\n  height: var(--handleHeight); /* Slider handle height */\n  background-color: var(--handleColor); /* Green background */\n  border: none;\n  border-radius: 0;\n  cursor: pointer; /* Cursor on hover */\n}\n.synth-slider[data-v-36c2bb0b]::-moz-range-thumb {\n  width: var(--handleWidth); /* Set a specific slider handle width */\n  height: var(--handleHeight); /* Slider handle height */\n  background-color: var(--handleColor); /* Green background */\n  border: none;\n  border-radius: 0;\n  cursor: pointer; /* Cursor on hover */\n}\n.modulation-indicator[data-v-36c2bb0b] {\n  position: absolute;\n  background: none;\n  pointer-events: none;\n}\n.modulation-indicator[data-v-36c2bb0b]::-webkit-slider-thumb {\n  -webkit-appearance: none; /* Override default look */\n  appearance: none;\n  width: var(--indicatorWidth); /* Set a specific slider handle width */\n  height: var(--indicatorHeight); /* Slider handle height */\n  background-color: var(--indicatorColor);\n  border: none;\n  border-radius: 0;\n}\n.modulation-indicator[data-v-36c2bb0b]::-moz-range-thumb {\n  width: var(--indicatorWidth); /* Set a specific slider handle width */\n  height: var(--indicatorHeight); /* Slider handle height */\n  background: var(--indicatorColor);\n  border: none;\n  border-radius: 0;\n}\n\n", map: {"version":3,"sources":["D:\\projects\\npm\\VueSliderWithIndicator\\src\\VueSliderWithIndicator.vue"],"names":[],"mappings":";AA6HA;EACA,yBAAA;EACA,2BAAA;EACA,aAAA;AACA;;AAEA;0DACA;AACA;EACA,wBAAA;EACA,gBAAA;EACA,yBAAA;EACA,2BAAA;EACA,wCAAA;EACA,wCAAA;EACA,0BAAA;EACA,2BAAA;AACA;AAEA;EACA,wBAAA,EAAA,0BAAA;EACA,gBAAA;EACA,yBAAA,EAAA,uCAAA;EACA,2BAAA,EAAA,yBAAA;EACA,oCAAA,EAAA,qBAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA,EAAA,oBAAA;AACA;AAEA;EACA,yBAAA,EAAA,uCAAA;EACA,2BAAA,EAAA,yBAAA;EACA,oCAAA,EAAA,qBAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA,EAAA,oBAAA;AACA;AAEA;EACA,kBAAA;EACA,gBAAA;EACA,oBAAA;AACA;AAEA;EACA,wBAAA,EAAA,0BAAA;EACA,gBAAA;EACA,4BAAA,EAAA,uCAAA;EACA,8BAAA,EAAA,yBAAA;EACA,uCAAA;EACA,YAAA;EACA,gBAAA;AACA;AAEA;EACA,4BAAA,EAAA,uCAAA;EACA,8BAAA,EAAA,yBAAA;EACA,iCAAA;EACA,YAAA;EACA,gBAAA;AACA","file":"VueSliderWithIndicator.vue","sourcesContent":["<template>\n  <div class=\"slider-container\" :style=\"containerStyle\">\n    <input\n      type=\"range\"\n      class=\"slider synth-slider\"\n      :style=\"sliderStyle\"\n      :max=\"settings.max\"\n      :min=\"settings.min\"\n      :step=\"settings.step\"\n      v-model=\"calculatedSliderValue\"\n    >\n    <input\n      type=\"range\"\n      class=\"slider modulation-indicator\"\n      :style=\"indicatorStyle\"\n      :max=\"settings.max\"\n      :min=\"settings.min\"\n      :step=\"settings.step\"\n      v-model=\"indicatorValue\"\n    >\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'VueSliderWithIndicator',\n  data () {\n    return {\n      settings: {\n        init: 20,\n        max: 100,\n        min: 0,\n        step: 1,\n        style: {\n          vertical: false,\n          direction: 'ltr',\n          sliderWidth: '500px',\n          sliderHeight: '50px',\n          backgroundColor: 'black',\n          handleWidth: '50px',\n          handleHeight: '50px',\n          handleColor: '#4CAF50',\n          indicatorWidth: '5px',\n          indicatorHeight: '50px',\n          indicatorColor: 'rgba(255, 136, 0, 0.7)'\n        }\n      }\n    }\n  },\n  props: {\n    sliderValue: [Number, String],\n    indicatorValue: [Number, String],\n    options: Object\n  },\n  computed: {\n    calculatedSliderValue: {\n      get () {\n        return this.sliderValue || this.settings.init\n      },\n      set (val) {\n        this.$emit('input', val)\n      }\n    },\n    // Setting up CSS variables from the values of the style object.\n    // Necessary because pseudo elements like the handle can't be\n    // accessed inline.\n    containerStyle () {\n      let transformOrigin = null\n      let rotation = null\n      if (this.settings.style.vertical) {\n        const sliderWidth = this.settings.style.sliderWidth\n        const widthValue = sliderWidth.match(/\\d+/g)[0]\n        const widthUnit = sliderWidth.slice(sliderWidth.match(/\\d+/g)[0].length)\n        transformOrigin = `${widthValue / 2 + widthUnit} ${widthValue / 2 + widthUnit}`\n        rotation = 'rotate(-90deg)'\n      }\n\n      return {\n        '--sliderWidth': this.settings.style.sliderWidth,\n        '--sliderHeight': this.settings.style.sliderHeight,\n        '--backgroundColor': this.settings.style.backgroundColor,\n        '--transformOrigin': transformOrigin,\n        '--rotation': rotation,\n        '--direction': this.settings.style.direction\n      }\n    },\n    sliderStyle () {\n      return {\n        '--handleWidth': this.settings.style.handleWidth,\n        '--handleHeight': this.settings.style.handleHeight,\n        '--handleColor': this.settings.style.handleColor\n      }\n    },\n    indicatorStyle () {\n      return {\n        '--indicatorWidth': this.settings.style.indicatorWidth,\n        '--indicatorHeight': this.settings.style.indicatorHeight,\n        '--indicatorColor': this.settings.style.indicatorColor\n      }\n    }\n  },\n  mounted () {\n    if (this.options) {\n      for (let opt in this.options) {\n        if (opt !== 'style') {\n          this.settings[opt] = this.options[opt]\n        }\n      }\n      // If sliderHeight is set, make handle and indicator take up full height\n      if (this.options.style) {\n        if (Object.keys(this.options.style).includes('sliderHeight')) {\n          this.settings.style.handleHeight = this.options.style['sliderHeight']\n          this.settings.style.indicatorHeight = this.options.style['sliderHeight']\n        }\n        for (let styling in this.options.style) {\n          this.settings.style[styling] = this.options.style[styling]\n        }\n      }\n    }\n  }\n}\n</script>\n\n<!-- Add \"scoped\" attribute to limit CSS to this component only -->\n<style scoped>\n.slider-container {\n  width: var(--sliderWidth);\n  height: var(--sliderHeight);\n  display: flex;\n}\n\n/* From:\nhttps://www.w3schools.com/howto/howto_js_rangeslider.asp */\n.slider {\n  -webkit-appearance: none;\n  appearance: none;\n  width: var(--sliderWidth);\n  height: var(--sliderHeight);\n  background-color: var(--backgroundColor);\n  transform-origin: var(--transformOrigin);\n  transform: var(--rotation);\n  direction: var(--direction);\n}\n\n.synth-slider::-webkit-slider-thumb {\n  -webkit-appearance: none; /* Override default look */\n  appearance: none;\n  width: var(--handleWidth); /* Set a specific slider handle width */\n  height: var(--handleHeight); /* Slider handle height */\n  background-color: var(--handleColor); /* Green background */\n  border: none;\n  border-radius: 0;\n  cursor: pointer; /* Cursor on hover */\n}\n\n.synth-slider::-moz-range-thumb {\n  width: var(--handleWidth); /* Set a specific slider handle width */\n  height: var(--handleHeight); /* Slider handle height */\n  background-color: var(--handleColor); /* Green background */\n  border: none;\n  border-radius: 0;\n  cursor: pointer; /* Cursor on hover */\n}\n\n.modulation-indicator {\n  position: absolute;\n  background: none;\n  pointer-events: none;\n}\n\n.modulation-indicator::-webkit-slider-thumb {\n  -webkit-appearance: none; /* Override default look */\n  appearance: none;\n  width: var(--indicatorWidth); /* Set a specific slider handle width */\n  height: var(--indicatorHeight); /* Slider handle height */\n  background-color: var(--indicatorColor);\n  border: none;\n  border-radius: 0;\n}\n\n.modulation-indicator::-moz-range-thumb {\n  width: var(--indicatorWidth); /* Set a specific slider handle width */\n  height: var(--indicatorHeight); /* Slider handle height */\n  background: var(--indicatorColor);\n  border: none;\n  border-radius: 0;\n}\n\n</style>\n"]}, media: undefined });
+      inject("data-v-909eb764_0", { source: "\n.slider-container[data-v-909eb764] {\n  width: var(--sliderWidth);\n  height: var(--sliderHeight);\n  display: flex;\n}\n\n/* From:\nhttps://www.w3schools.com/howto/howto_js_rangeslider.asp */\n.slider[data-v-909eb764] {\n  -webkit-appearance: none;\n  appearance: none;\n  width: var(--sliderWidth);\n  height: var(--sliderHeight);\n  background-color: var(--backgroundColor);\n  transform-origin: var(--transformOrigin);\n  transform: var(--rotation);\n  direction: var(--direction);\n}\n.synth-slider[data-v-909eb764]::-webkit-slider-thumb {\n  -webkit-appearance: none; /* Override default look */\n  appearance: none;\n  width: var(--handleWidth); /* Set a specific slider handle width */\n  height: var(--handleHeight); /* Slider handle height */\n  background-color: var(--handleColor); /* Green background */\n  border: none;\n  border-radius: 0;\n  cursor: pointer; /* Cursor on hover */\n}\n.synth-slider[data-v-909eb764]::-moz-range-thumb {\n  width: var(--handleWidth); /* Set a specific slider handle width */\n  height: var(--handleHeight); /* Slider handle height */\n  background-color: var(--handleColor); /* Green background */\n  border: none;\n  border-radius: 0;\n  cursor: pointer; /* Cursor on hover */\n}\n.modulation-indicator[data-v-909eb764] {\n  position: absolute;\n  background: none;\n  pointer-events: none;\n}\n.modulation-indicator[data-v-909eb764]::-webkit-slider-thumb {\n  -webkit-appearance: none; /* Override default look */\n  appearance: none;\n  width: var(--indicatorWidth); /* Set a specific slider handle width */\n  height: var(--indicatorHeight); /* Slider handle height */\n  background-color: var(--indicatorColor);\n  border: none;\n  border-radius: 0;\n}\n.modulation-indicator[data-v-909eb764]::-moz-range-thumb {\n  width: var(--indicatorWidth); /* Set a specific slider handle width */\n  height: var(--indicatorHeight); /* Slider handle height */\n  background: var(--indicatorColor);\n  border: none;\n  border-radius: 0;\n}\n\n", map: {"version":3,"sources":["D:\\projects\\npm\\VueSliderWithIndicator\\src\\VueSliderWithIndicator.vue"],"names":[],"mappings":";AAyIA;EACA,yBAAA;EACA,2BAAA;EACA,aAAA;AACA;;AAEA;0DACA;AACA;EACA,wBAAA;EACA,gBAAA;EACA,yBAAA;EACA,2BAAA;EACA,wCAAA;EACA,wCAAA;EACA,0BAAA;EACA,2BAAA;AACA;AAEA;EACA,wBAAA,EAAA,0BAAA;EACA,gBAAA;EACA,yBAAA,EAAA,uCAAA;EACA,2BAAA,EAAA,yBAAA;EACA,oCAAA,EAAA,qBAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA,EAAA,oBAAA;AACA;AAEA;EACA,yBAAA,EAAA,uCAAA;EACA,2BAAA,EAAA,yBAAA;EACA,oCAAA,EAAA,qBAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA,EAAA,oBAAA;AACA;AAEA;EACA,kBAAA;EACA,gBAAA;EACA,oBAAA;AACA;AAEA;EACA,wBAAA,EAAA,0BAAA;EACA,gBAAA;EACA,4BAAA,EAAA,uCAAA;EACA,8BAAA,EAAA,yBAAA;EACA,uCAAA;EACA,YAAA;EACA,gBAAA;AACA;AAEA;EACA,4BAAA,EAAA,uCAAA;EACA,8BAAA,EAAA,yBAAA;EACA,iCAAA;EACA,YAAA;EACA,gBAAA;AACA","file":"VueSliderWithIndicator.vue","sourcesContent":["<template>\n  <div class=\"slider-container\" :style=\"containerStyle\">\n    <input\n      type=\"range\"\n      class=\"slider synth-slider\"\n      :style=\"sliderStyle\"\n      :max=\"settings.max\"\n      :min=\"settings.min\"\n      :step=\"settings.step\"\n      v-model=\"calculatedSliderValue\"\n    >\n    <input\n      type=\"range\"\n      class=\"slider modulation-indicator\"\n      :style=\"indicatorStyle\"\n      :max=\"settings.max\"\n      :min=\"settings.min\"\n      :step=\"settings.step\"\n      v-model=\"indicatorValue\"\n    >\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'VueSliderWithIndicator',\n  data () {\n    return {\n      settings: {\n        init: 50,\n        max: 100,\n        min: 0,\n        step: 1,\n        style: {\n          vertical: false,\n          direction: 'ltr',\n          sliderWidth: '500px',\n          sliderHeight: '50px',\n          backgroundColor: 'black',\n          handleWidth: '50px',\n          handleHeight: '50px',\n          handleColor: '#4CAF50',\n          indicatorWidth: '5px',\n          indicatorHeight: '50px',\n          indicatorColor: 'rgba(255, 136, 0, 0.7)'\n        }\n      }\n    }\n  },\n  props: {\n    sliderValue: Number,\n    indicatorValue: Number,\n    options: Object\n  },\n  computed: {\n    calculatedSliderValue: {\n      get () {\n        const valueOrDefault =\n          this.sliderValue === 'undefined'\n          ? this.settings.init\n          : this.sliderValue\n        return valueOrDefault\n      },\n      set (val) {\n        this.$emit('input', val)\n      }\n    },\n    // Setting up CSS variables from the values of the style object.\n    // Necessary because pseudo elements like the handle can't be\n    // accessed inline.\n    containerStyle () {\n      let transformOrigin = null\n      let rotation = null\n      if (this.settings.style.vertical) {\n        const sliderWidth = this.settings.style.sliderWidth\n        const widthValue = sliderWidth.match(/\\d+/g)[0]\n        const widthUnit = sliderWidth.slice(sliderWidth.match(/\\d+/g)[0].length)\n        transformOrigin = `${widthValue / 2 + widthUnit} ${widthValue / 2 + widthUnit}`\n        rotation = 'rotate(-90deg)'\n      }\n\n      return {\n        '--sliderWidth': this.settings.style.sliderWidth,\n        '--sliderHeight': this.settings.style.sliderHeight,\n        '--backgroundColor': this.settings.style.backgroundColor,\n        '--transformOrigin': transformOrigin,\n        '--rotation': rotation,\n        '--direction': this.settings.style.direction\n      }\n    },\n    sliderStyle () {\n      return {\n        '--handleWidth': this.settings.style.handleWidth,\n        '--handleHeight': this.settings.style.handleHeight,\n        '--handleColor': this.settings.style.handleColor\n      }\n    },\n    indicatorStyle () {\n      return {\n        '--indicatorWidth': this.settings.style.indicatorWidth,\n        '--indicatorHeight': this.settings.style.indicatorHeight,\n        '--indicatorColor': this.settings.style.indicatorColor\n      }\n    }\n  },\n  mounted () {\n\n    if (isNaN(this.sliderValue)) {\n      console.error(`Expected Number for 'sliderValue', instead got ${this.sliderValue}.`)\n    }\n    if (isNaN(this.indicatorValue)) {\n      console.error(`Expected Number for 'indicatorValue', instead got ${this.indicatorValue}.`)\n    }\n\n    if (this.options) {\n      for (let opt in this.options) {\n        if (opt !== 'style') {\n          this.settings[opt] = this.options[opt]\n        }\n      }\n      // If sliderHeight is set, make handle and indicator take up full height\n      if (this.options.style) {\n        if (Object.keys(this.options.style).includes('sliderHeight')) {\n          this.settings.style.handleHeight = this.options.style['sliderHeight']\n          this.settings.style.indicatorHeight = this.options.style['sliderHeight']\n        }\n        for (let styling in this.options.style) {\n          this.settings.style[styling] = this.options.style[styling]\n        }\n      }\n    }\n  }\n}\n</script>\n\n<!-- Add \"scoped\" attribute to limit CSS to this component only -->\n<style scoped>\n.slider-container {\n  width: var(--sliderWidth);\n  height: var(--sliderHeight);\n  display: flex;\n}\n\n/* From:\nhttps://www.w3schools.com/howto/howto_js_rangeslider.asp */\n.slider {\n  -webkit-appearance: none;\n  appearance: none;\n  width: var(--sliderWidth);\n  height: var(--sliderHeight);\n  background-color: var(--backgroundColor);\n  transform-origin: var(--transformOrigin);\n  transform: var(--rotation);\n  direction: var(--direction);\n}\n\n.synth-slider::-webkit-slider-thumb {\n  -webkit-appearance: none; /* Override default look */\n  appearance: none;\n  width: var(--handleWidth); /* Set a specific slider handle width */\n  height: var(--handleHeight); /* Slider handle height */\n  background-color: var(--handleColor); /* Green background */\n  border: none;\n  border-radius: 0;\n  cursor: pointer; /* Cursor on hover */\n}\n\n.synth-slider::-moz-range-thumb {\n  width: var(--handleWidth); /* Set a specific slider handle width */\n  height: var(--handleHeight); /* Slider handle height */\n  background-color: var(--handleColor); /* Green background */\n  border: none;\n  border-radius: 0;\n  cursor: pointer; /* Cursor on hover */\n}\n\n.modulation-indicator {\n  position: absolute;\n  background: none;\n  pointer-events: none;\n}\n\n.modulation-indicator::-webkit-slider-thumb {\n  -webkit-appearance: none; /* Override default look */\n  appearance: none;\n  width: var(--indicatorWidth); /* Set a specific slider handle width */\n  height: var(--indicatorHeight); /* Slider handle height */\n  background-color: var(--indicatorColor);\n  border: none;\n  border-radius: 0;\n}\n\n.modulation-indicator::-moz-range-thumb {\n  width: var(--indicatorWidth); /* Set a specific slider handle width */\n  height: var(--indicatorHeight); /* Slider handle height */\n  background: var(--indicatorColor);\n  border: none;\n  border-radius: 0;\n}\n\n</style>\n"]}, media: undefined });
 
     };
     /* scoped */
-    var __vue_scope_id__ = "data-v-36c2bb0b";
+    var __vue_scope_id__ = "data-v-909eb764";
     /* module identifier */
     var __vue_module_identifier__ = undefined;
     /* functional template */
diff --git a/dist/vue-slider-with-indicator.umd.js b/dist/vue-slider-with-indicator.umd.js
index 2ef349b..022d6b7 100644
--- a/dist/vue-slider-with-indicator.umd.js
+++ b/dist/vue-slider-with-indicator.umd.js
@@ -33,7 +33,7 @@
     data: function data () {
       return {
         settings: {
-          init: 20,
+          init: 50,
           max: 100,
           min: 0,
           step: 1,
@@ -54,14 +54,18 @@
       }
     },
     props: {
-      sliderValue: [Number, String],
-      indicatorValue: [Number, String],
+      sliderValue: Number,
+      indicatorValue: Number,
       options: Object
     },
     computed: {
       calculatedSliderValue: {
         get: function get () {
-          return this.sliderValue || this.settings.init
+          var valueOrDefault =
+            this.sliderValue === 'undefined'
+            ? this.settings.init
+            : this.sliderValue;
+          return valueOrDefault
         },
         set: function set (val) {
           this.$emit('input', val);
@@ -106,6 +110,14 @@
       }
     },
     mounted: function mounted () {
+
+      if (isNaN(this.sliderValue)) {
+        console.error(("Expected Number for 'sliderValue', instead got " + (this.sliderValue) + "."));
+      }
+      if (isNaN(this.indicatorValue)) {
+        console.error(("Expected Number for 'indicatorValue', instead got " + (this.indicatorValue) + "."));
+      }
+
       if (this.options) {
         for (var opt in this.options) {
           if (opt !== 'style') {
@@ -324,11 +336,11 @@
     /* style */
     var __vue_inject_styles__ = function (inject) {
       if (!inject) { return }
-      inject("data-v-36c2bb0b_0", { source: "\n.slider-container[data-v-36c2bb0b] {\n  width: var(--sliderWidth);\n  height: var(--sliderHeight);\n  display: flex;\n}\n\n/* From:\nhttps://www.w3schools.com/howto/howto_js_rangeslider.asp */\n.slider[data-v-36c2bb0b] {\n  -webkit-appearance: none;\n  appearance: none;\n  width: var(--sliderWidth);\n  height: var(--sliderHeight);\n  background-color: var(--backgroundColor);\n  transform-origin: var(--transformOrigin);\n  transform: var(--rotation);\n  direction: var(--direction);\n}\n.synth-slider[data-v-36c2bb0b]::-webkit-slider-thumb {\n  -webkit-appearance: none; /* Override default look */\n  appearance: none;\n  width: var(--handleWidth); /* Set a specific slider handle width */\n  height: var(--handleHeight); /* Slider handle height */\n  background-color: var(--handleColor); /* Green background */\n  border: none;\n  border-radius: 0;\n  cursor: pointer; /* Cursor on hover */\n}\n.synth-slider[data-v-36c2bb0b]::-moz-range-thumb {\n  width: var(--handleWidth); /* Set a specific slider handle width */\n  height: var(--handleHeight); /* Slider handle height */\n  background-color: var(--handleColor); /* Green background */\n  border: none;\n  border-radius: 0;\n  cursor: pointer; /* Cursor on hover */\n}\n.modulation-indicator[data-v-36c2bb0b] {\n  position: absolute;\n  background: none;\n  pointer-events: none;\n}\n.modulation-indicator[data-v-36c2bb0b]::-webkit-slider-thumb {\n  -webkit-appearance: none; /* Override default look */\n  appearance: none;\n  width: var(--indicatorWidth); /* Set a specific slider handle width */\n  height: var(--indicatorHeight); /* Slider handle height */\n  background-color: var(--indicatorColor);\n  border: none;\n  border-radius: 0;\n}\n.modulation-indicator[data-v-36c2bb0b]::-moz-range-thumb {\n  width: var(--indicatorWidth); /* Set a specific slider handle width */\n  height: var(--indicatorHeight); /* Slider handle height */\n  background: var(--indicatorColor);\n  border: none;\n  border-radius: 0;\n}\n\n", map: {"version":3,"sources":["D:\\projects\\npm\\VueSliderWithIndicator\\src\\VueSliderWithIndicator.vue"],"names":[],"mappings":";AA6HA;EACA,yBAAA;EACA,2BAAA;EACA,aAAA;AACA;;AAEA;0DACA;AACA;EACA,wBAAA;EACA,gBAAA;EACA,yBAAA;EACA,2BAAA;EACA,wCAAA;EACA,wCAAA;EACA,0BAAA;EACA,2BAAA;AACA;AAEA;EACA,wBAAA,EAAA,0BAAA;EACA,gBAAA;EACA,yBAAA,EAAA,uCAAA;EACA,2BAAA,EAAA,yBAAA;EACA,oCAAA,EAAA,qBAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA,EAAA,oBAAA;AACA;AAEA;EACA,yBAAA,EAAA,uCAAA;EACA,2BAAA,EAAA,yBAAA;EACA,oCAAA,EAAA,qBAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA,EAAA,oBAAA;AACA;AAEA;EACA,kBAAA;EACA,gBAAA;EACA,oBAAA;AACA;AAEA;EACA,wBAAA,EAAA,0BAAA;EACA,gBAAA;EACA,4BAAA,EAAA,uCAAA;EACA,8BAAA,EAAA,yBAAA;EACA,uCAAA;EACA,YAAA;EACA,gBAAA;AACA;AAEA;EACA,4BAAA,EAAA,uCAAA;EACA,8BAAA,EAAA,yBAAA;EACA,iCAAA;EACA,YAAA;EACA,gBAAA;AACA","file":"VueSliderWithIndicator.vue","sourcesContent":["<template>\n  <div class=\"slider-container\" :style=\"containerStyle\">\n    <input\n      type=\"range\"\n      class=\"slider synth-slider\"\n      :style=\"sliderStyle\"\n      :max=\"settings.max\"\n      :min=\"settings.min\"\n      :step=\"settings.step\"\n      v-model=\"calculatedSliderValue\"\n    >\n    <input\n      type=\"range\"\n      class=\"slider modulation-indicator\"\n      :style=\"indicatorStyle\"\n      :max=\"settings.max\"\n      :min=\"settings.min\"\n      :step=\"settings.step\"\n      v-model=\"indicatorValue\"\n    >\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'VueSliderWithIndicator',\n  data () {\n    return {\n      settings: {\n        init: 20,\n        max: 100,\n        min: 0,\n        step: 1,\n        style: {\n          vertical: false,\n          direction: 'ltr',\n          sliderWidth: '500px',\n          sliderHeight: '50px',\n          backgroundColor: 'black',\n          handleWidth: '50px',\n          handleHeight: '50px',\n          handleColor: '#4CAF50',\n          indicatorWidth: '5px',\n          indicatorHeight: '50px',\n          indicatorColor: 'rgba(255, 136, 0, 0.7)'\n        }\n      }\n    }\n  },\n  props: {\n    sliderValue: [Number, String],\n    indicatorValue: [Number, String],\n    options: Object\n  },\n  computed: {\n    calculatedSliderValue: {\n      get () {\n        return this.sliderValue || this.settings.init\n      },\n      set (val) {\n        this.$emit('input', val)\n      }\n    },\n    // Setting up CSS variables from the values of the style object.\n    // Necessary because pseudo elements like the handle can't be\n    // accessed inline.\n    containerStyle () {\n      let transformOrigin = null\n      let rotation = null\n      if (this.settings.style.vertical) {\n        const sliderWidth = this.settings.style.sliderWidth\n        const widthValue = sliderWidth.match(/\\d+/g)[0]\n        const widthUnit = sliderWidth.slice(sliderWidth.match(/\\d+/g)[0].length)\n        transformOrigin = `${widthValue / 2 + widthUnit} ${widthValue / 2 + widthUnit}`\n        rotation = 'rotate(-90deg)'\n      }\n\n      return {\n        '--sliderWidth': this.settings.style.sliderWidth,\n        '--sliderHeight': this.settings.style.sliderHeight,\n        '--backgroundColor': this.settings.style.backgroundColor,\n        '--transformOrigin': transformOrigin,\n        '--rotation': rotation,\n        '--direction': this.settings.style.direction\n      }\n    },\n    sliderStyle () {\n      return {\n        '--handleWidth': this.settings.style.handleWidth,\n        '--handleHeight': this.settings.style.handleHeight,\n        '--handleColor': this.settings.style.handleColor\n      }\n    },\n    indicatorStyle () {\n      return {\n        '--indicatorWidth': this.settings.style.indicatorWidth,\n        '--indicatorHeight': this.settings.style.indicatorHeight,\n        '--indicatorColor': this.settings.style.indicatorColor\n      }\n    }\n  },\n  mounted () {\n    if (this.options) {\n      for (let opt in this.options) {\n        if (opt !== 'style') {\n          this.settings[opt] = this.options[opt]\n        }\n      }\n      // If sliderHeight is set, make handle and indicator take up full height\n      if (this.options.style) {\n        if (Object.keys(this.options.style).includes('sliderHeight')) {\n          this.settings.style.handleHeight = this.options.style['sliderHeight']\n          this.settings.style.indicatorHeight = this.options.style['sliderHeight']\n        }\n        for (let styling in this.options.style) {\n          this.settings.style[styling] = this.options.style[styling]\n        }\n      }\n    }\n  }\n}\n</script>\n\n<!-- Add \"scoped\" attribute to limit CSS to this component only -->\n<style scoped>\n.slider-container {\n  width: var(--sliderWidth);\n  height: var(--sliderHeight);\n  display: flex;\n}\n\n/* From:\nhttps://www.w3schools.com/howto/howto_js_rangeslider.asp */\n.slider {\n  -webkit-appearance: none;\n  appearance: none;\n  width: var(--sliderWidth);\n  height: var(--sliderHeight);\n  background-color: var(--backgroundColor);\n  transform-origin: var(--transformOrigin);\n  transform: var(--rotation);\n  direction: var(--direction);\n}\n\n.synth-slider::-webkit-slider-thumb {\n  -webkit-appearance: none; /* Override default look */\n  appearance: none;\n  width: var(--handleWidth); /* Set a specific slider handle width */\n  height: var(--handleHeight); /* Slider handle height */\n  background-color: var(--handleColor); /* Green background */\n  border: none;\n  border-radius: 0;\n  cursor: pointer; /* Cursor on hover */\n}\n\n.synth-slider::-moz-range-thumb {\n  width: var(--handleWidth); /* Set a specific slider handle width */\n  height: var(--handleHeight); /* Slider handle height */\n  background-color: var(--handleColor); /* Green background */\n  border: none;\n  border-radius: 0;\n  cursor: pointer; /* Cursor on hover */\n}\n\n.modulation-indicator {\n  position: absolute;\n  background: none;\n  pointer-events: none;\n}\n\n.modulation-indicator::-webkit-slider-thumb {\n  -webkit-appearance: none; /* Override default look */\n  appearance: none;\n  width: var(--indicatorWidth); /* Set a specific slider handle width */\n  height: var(--indicatorHeight); /* Slider handle height */\n  background-color: var(--indicatorColor);\n  border: none;\n  border-radius: 0;\n}\n\n.modulation-indicator::-moz-range-thumb {\n  width: var(--indicatorWidth); /* Set a specific slider handle width */\n  height: var(--indicatorHeight); /* Slider handle height */\n  background: var(--indicatorColor);\n  border: none;\n  border-radius: 0;\n}\n\n</style>\n"]}, media: undefined });
+      inject("data-v-909eb764_0", { source: "\n.slider-container[data-v-909eb764] {\n  width: var(--sliderWidth);\n  height: var(--sliderHeight);\n  display: flex;\n}\n\n/* From:\nhttps://www.w3schools.com/howto/howto_js_rangeslider.asp */\n.slider[data-v-909eb764] {\n  -webkit-appearance: none;\n  appearance: none;\n  width: var(--sliderWidth);\n  height: var(--sliderHeight);\n  background-color: var(--backgroundColor);\n  transform-origin: var(--transformOrigin);\n  transform: var(--rotation);\n  direction: var(--direction);\n}\n.synth-slider[data-v-909eb764]::-webkit-slider-thumb {\n  -webkit-appearance: none; /* Override default look */\n  appearance: none;\n  width: var(--handleWidth); /* Set a specific slider handle width */\n  height: var(--handleHeight); /* Slider handle height */\n  background-color: var(--handleColor); /* Green background */\n  border: none;\n  border-radius: 0;\n  cursor: pointer; /* Cursor on hover */\n}\n.synth-slider[data-v-909eb764]::-moz-range-thumb {\n  width: var(--handleWidth); /* Set a specific slider handle width */\n  height: var(--handleHeight); /* Slider handle height */\n  background-color: var(--handleColor); /* Green background */\n  border: none;\n  border-radius: 0;\n  cursor: pointer; /* Cursor on hover */\n}\n.modulation-indicator[data-v-909eb764] {\n  position: absolute;\n  background: none;\n  pointer-events: none;\n}\n.modulation-indicator[data-v-909eb764]::-webkit-slider-thumb {\n  -webkit-appearance: none; /* Override default look */\n  appearance: none;\n  width: var(--indicatorWidth); /* Set a specific slider handle width */\n  height: var(--indicatorHeight); /* Slider handle height */\n  background-color: var(--indicatorColor);\n  border: none;\n  border-radius: 0;\n}\n.modulation-indicator[data-v-909eb764]::-moz-range-thumb {\n  width: var(--indicatorWidth); /* Set a specific slider handle width */\n  height: var(--indicatorHeight); /* Slider handle height */\n  background: var(--indicatorColor);\n  border: none;\n  border-radius: 0;\n}\n\n", map: {"version":3,"sources":["D:\\projects\\npm\\VueSliderWithIndicator\\src\\VueSliderWithIndicator.vue"],"names":[],"mappings":";AAyIA;EACA,yBAAA;EACA,2BAAA;EACA,aAAA;AACA;;AAEA;0DACA;AACA;EACA,wBAAA;EACA,gBAAA;EACA,yBAAA;EACA,2BAAA;EACA,wCAAA;EACA,wCAAA;EACA,0BAAA;EACA,2BAAA;AACA;AAEA;EACA,wBAAA,EAAA,0BAAA;EACA,gBAAA;EACA,yBAAA,EAAA,uCAAA;EACA,2BAAA,EAAA,yBAAA;EACA,oCAAA,EAAA,qBAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA,EAAA,oBAAA;AACA;AAEA;EACA,yBAAA,EAAA,uCAAA;EACA,2BAAA,EAAA,yBAAA;EACA,oCAAA,EAAA,qBAAA;EACA,YAAA;EACA,gBAAA;EACA,eAAA,EAAA,oBAAA;AACA;AAEA;EACA,kBAAA;EACA,gBAAA;EACA,oBAAA;AACA;AAEA;EACA,wBAAA,EAAA,0BAAA;EACA,gBAAA;EACA,4BAAA,EAAA,uCAAA;EACA,8BAAA,EAAA,yBAAA;EACA,uCAAA;EACA,YAAA;EACA,gBAAA;AACA;AAEA;EACA,4BAAA,EAAA,uCAAA;EACA,8BAAA,EAAA,yBAAA;EACA,iCAAA;EACA,YAAA;EACA,gBAAA;AACA","file":"VueSliderWithIndicator.vue","sourcesContent":["<template>\n  <div class=\"slider-container\" :style=\"containerStyle\">\n    <input\n      type=\"range\"\n      class=\"slider synth-slider\"\n      :style=\"sliderStyle\"\n      :max=\"settings.max\"\n      :min=\"settings.min\"\n      :step=\"settings.step\"\n      v-model=\"calculatedSliderValue\"\n    >\n    <input\n      type=\"range\"\n      class=\"slider modulation-indicator\"\n      :style=\"indicatorStyle\"\n      :max=\"settings.max\"\n      :min=\"settings.min\"\n      :step=\"settings.step\"\n      v-model=\"indicatorValue\"\n    >\n  </div>\n</template>\n\n<script>\nexport default {\n  name: 'VueSliderWithIndicator',\n  data () {\n    return {\n      settings: {\n        init: 50,\n        max: 100,\n        min: 0,\n        step: 1,\n        style: {\n          vertical: false,\n          direction: 'ltr',\n          sliderWidth: '500px',\n          sliderHeight: '50px',\n          backgroundColor: 'black',\n          handleWidth: '50px',\n          handleHeight: '50px',\n          handleColor: '#4CAF50',\n          indicatorWidth: '5px',\n          indicatorHeight: '50px',\n          indicatorColor: 'rgba(255, 136, 0, 0.7)'\n        }\n      }\n    }\n  },\n  props: {\n    sliderValue: Number,\n    indicatorValue: Number,\n    options: Object\n  },\n  computed: {\n    calculatedSliderValue: {\n      get () {\n        const valueOrDefault =\n          this.sliderValue === 'undefined'\n          ? this.settings.init\n          : this.sliderValue\n        return valueOrDefault\n      },\n      set (val) {\n        this.$emit('input', val)\n      }\n    },\n    // Setting up CSS variables from the values of the style object.\n    // Necessary because pseudo elements like the handle can't be\n    // accessed inline.\n    containerStyle () {\n      let transformOrigin = null\n      let rotation = null\n      if (this.settings.style.vertical) {\n        const sliderWidth = this.settings.style.sliderWidth\n        const widthValue = sliderWidth.match(/\\d+/g)[0]\n        const widthUnit = sliderWidth.slice(sliderWidth.match(/\\d+/g)[0].length)\n        transformOrigin = `${widthValue / 2 + widthUnit} ${widthValue / 2 + widthUnit}`\n        rotation = 'rotate(-90deg)'\n      }\n\n      return {\n        '--sliderWidth': this.settings.style.sliderWidth,\n        '--sliderHeight': this.settings.style.sliderHeight,\n        '--backgroundColor': this.settings.style.backgroundColor,\n        '--transformOrigin': transformOrigin,\n        '--rotation': rotation,\n        '--direction': this.settings.style.direction\n      }\n    },\n    sliderStyle () {\n      return {\n        '--handleWidth': this.settings.style.handleWidth,\n        '--handleHeight': this.settings.style.handleHeight,\n        '--handleColor': this.settings.style.handleColor\n      }\n    },\n    indicatorStyle () {\n      return {\n        '--indicatorWidth': this.settings.style.indicatorWidth,\n        '--indicatorHeight': this.settings.style.indicatorHeight,\n        '--indicatorColor': this.settings.style.indicatorColor\n      }\n    }\n  },\n  mounted () {\n\n    if (isNaN(this.sliderValue)) {\n      console.error(`Expected Number for 'sliderValue', instead got ${this.sliderValue}.`)\n    }\n    if (isNaN(this.indicatorValue)) {\n      console.error(`Expected Number for 'indicatorValue', instead got ${this.indicatorValue}.`)\n    }\n\n    if (this.options) {\n      for (let opt in this.options) {\n        if (opt !== 'style') {\n          this.settings[opt] = this.options[opt]\n        }\n      }\n      // If sliderHeight is set, make handle and indicator take up full height\n      if (this.options.style) {\n        if (Object.keys(this.options.style).includes('sliderHeight')) {\n          this.settings.style.handleHeight = this.options.style['sliderHeight']\n          this.settings.style.indicatorHeight = this.options.style['sliderHeight']\n        }\n        for (let styling in this.options.style) {\n          this.settings.style[styling] = this.options.style[styling]\n        }\n      }\n    }\n  }\n}\n</script>\n\n<!-- Add \"scoped\" attribute to limit CSS to this component only -->\n<style scoped>\n.slider-container {\n  width: var(--sliderWidth);\n  height: var(--sliderHeight);\n  display: flex;\n}\n\n/* From:\nhttps://www.w3schools.com/howto/howto_js_rangeslider.asp */\n.slider {\n  -webkit-appearance: none;\n  appearance: none;\n  width: var(--sliderWidth);\n  height: var(--sliderHeight);\n  background-color: var(--backgroundColor);\n  transform-origin: var(--transformOrigin);\n  transform: var(--rotation);\n  direction: var(--direction);\n}\n\n.synth-slider::-webkit-slider-thumb {\n  -webkit-appearance: none; /* Override default look */\n  appearance: none;\n  width: var(--handleWidth); /* Set a specific slider handle width */\n  height: var(--handleHeight); /* Slider handle height */\n  background-color: var(--handleColor); /* Green background */\n  border: none;\n  border-radius: 0;\n  cursor: pointer; /* Cursor on hover */\n}\n\n.synth-slider::-moz-range-thumb {\n  width: var(--handleWidth); /* Set a specific slider handle width */\n  height: var(--handleHeight); /* Slider handle height */\n  background-color: var(--handleColor); /* Green background */\n  border: none;\n  border-radius: 0;\n  cursor: pointer; /* Cursor on hover */\n}\n\n.modulation-indicator {\n  position: absolute;\n  background: none;\n  pointer-events: none;\n}\n\n.modulation-indicator::-webkit-slider-thumb {\n  -webkit-appearance: none; /* Override default look */\n  appearance: none;\n  width: var(--indicatorWidth); /* Set a specific slider handle width */\n  height: var(--indicatorHeight); /* Slider handle height */\n  background-color: var(--indicatorColor);\n  border: none;\n  border-radius: 0;\n}\n\n.modulation-indicator::-moz-range-thumb {\n  width: var(--indicatorWidth); /* Set a specific slider handle width */\n  height: var(--indicatorHeight); /* Slider handle height */\n  background: var(--indicatorColor);\n  border: none;\n  border-radius: 0;\n}\n\n</style>\n"]}, media: undefined });
 
     };
     /* scoped */
-    var __vue_scope_id__ = "data-v-36c2bb0b";
+    var __vue_scope_id__ = "data-v-909eb764";
     /* module identifier */
     var __vue_module_identifier__ = undefined;
     /* functional template */