Feature/double (range) slider

demo/App.vue

@@ -1,35 +1,47 @@
 <template>
   <div id="app">
-    <h1 class="heading">
-      This is DEMO of the Plugin in App
-    </h1>
     <circle-slider 
-      v-model="sliderValueOrZero"
+      v-model="sliderMaxValueOrZero"
       :side="300"
       :circleWidth="20"
-      :knobRadius="20"
-      :stepSize="10"
+      :maxKnobRadius="20"
+      :minKnobRadius="20"
+      :minValue="sliderMinValueOrZero"
+      @inputMin=" value => sliderMinValue = value "
+      :rangeSlider="true"
     >
     </circle-slider>
-    <div class="value"> {{ sliderValue }} </div>
-    <input type="number" v-model.number="sliderValue">
+    <div class="value"> {{ sliderMaxValue }} </div>
+    <input type="number" v-model.number="sliderMaxValue">
+    <input  type="number" v-model.number="sliderMinValue">
+    <div class="min-value"> {{ sliderMinValue }} </div>
   </div>
 </template>
 
 <script>
 export default {
   data () {
     return {
-      sliderValue: 0
+      sliderMaxValue: 0,
+      sliderMinValue: 0,
+      // minKnobColor: '#EA1313'
     }
   },
   computed: {
-    sliderValueOrZero: {
+    sliderMaxValueOrZero: {
       get () {
-        return this.sliderValue === '' ? 0 : this.sliderValue
+        return this.sliderMaxValue === '' ? 0 : this.sliderMaxValue
       },
       set (value) {
-        this.sliderValue = value
+        this.sliderMaxValue = value
+      }
+    },
+    sliderMinValueOrZero: {
+      get () {
+        return this.sliderMinValue === '' ? 0 : this.sliderMinValue
+      },
+      set (value) {
+        this.sliderMinValue = value
       }
     }
   }
@@ -41,6 +53,7 @@ export default {
     display: flex;
     flex-direction: column;
     align-items: center;
+    padding-top: 200px;
   }
 
   .heading {
@@ -55,6 +68,11 @@ export default {
     margin-top: 20px;
   }
 
+  .min-value {
+    font-size: 20px;
+    margin-top: 20px;
+  }
+
   input {
     height: 30px;
     font-size: 20px;