From 76eebf1aac8dc484316c03cad7fc47fd51d849b8 Mon Sep 17 00:00:00 2001
From: Ali Asanov <ali.a@devstark.com>
Date: Thu, 5 Dec 2019 14:30:31 +0300
Subject: [PATCH 1/9] add second knob

---
 demo/App.vue                    |  5 +----
 src/components/CircleSlider.vue | 28 +++++++++++++++++++++++-----
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/demo/App.vue b/demo/App.vue
index 68e4ffd..08fcc0e 100644
--- a/demo/App.vue
+++ b/demo/App.vue
@@ -1,14 +1,10 @@
 <template>
   <div id="app">
-    <h1 class="heading">
-      This is DEMO of the Plugin in App
-    </h1>
     <circle-slider 
       v-model="sliderValueOrZero"
       :side="300"
       :circleWidth="20"
       :knobRadius="20"
-      :stepSize="10"
     >
     </circle-slider>
     <div class="value"> {{ sliderValue }} </div>
@@ -41,6 +37,7 @@ export default {
     display: flex;
     flex-direction: column;
     align-items: center;
+    padding-top: 200px;
   }
 
   .heading {
diff --git a/src/components/CircleSlider.vue b/src/components/CircleSlider.vue
index 55c2622..7a4afeb 100644
--- a/src/components/CircleSlider.vue
+++ b/src/components/CircleSlider.vue
@@ -10,6 +10,7 @@
         <circle :stroke="circleColor" fill="none" :stroke-width="cpMainCircleStrokeWidth" :cx="cpCenter" :cy="cpCenter" :r="radius"></circle>
         <path :stroke="progressColor" fill="none" :stroke-width="cpPathStrokeWidth" :d="cpPathD"></path>
         <circle :fill="knobColor" :r="cpKnobRadius" :cx="cpPathX" :cy="cpPathY"></circle>
+        <circle :fill="knobColor" :r="cpKnobRadius" :cx="cpKnobMinX" :cy="cpKnobMinY"></circle>
       </g>
     </svg>
   </div>
@@ -115,6 +116,11 @@ export default {
       type: Number,
       required: false,
       default: 10
+    },
+    minKnobAngle: {
+      type: Number,
+      required: false,
+      default: 90 // degrees
     }
     // limitMin: {
     //   type: Number,
@@ -162,7 +168,8 @@ export default {
       return this.circleWidth || (this.side / 2) / this.circleWidthRel
     },
     cpPathDirection () {
-      return (this.cpAngle < 3 / 2 * Math.PI) ? 0 : 1
+      // return (this.cpAngle < 3 / 2 * Math.PI) ? 0 : 1
+      return (this.cpAngle - (this.cpMinKnobRadians - Math.PI / 2) < 3 / 2 * Math.PI) ? 0 : 1
     },
     cpPathX () {
       return this.cpCenter + this.radius * Math.cos(this.cpAngle)
@@ -178,8 +185,10 @@ export default {
     },
     cpPathD () {
       let parts = []
-      parts.push('M' + this.cpCenter)
-      parts.push(this.cpCenter + this.radius)
+      // parts.push('M' + this.cpCenter)
+      parts.push('M' + this.cpKnobMinX)
+      // parts.push(this.cpCenter + this.radius)
+      parts.push(this.cpKnobMinY)
       parts.push('A')
       parts.push(this.radius)
       parts.push(this.radius)
@@ -206,8 +215,18 @@ export default {
       return (Math.atan2(this.relativeY - this.cpCenter, this.relativeX - this.cpCenter) + Math.PI * 3 / 2) % (Math.PI * 2)
     },
     cpIsTouchWithinSliderRange () {
+      // console.log('calc offset')
       const touchOffset = Math.sqrt(Math.pow(Math.abs(this.relativeX - this.cpCenter), 2) + Math.pow(Math.abs(this.relativeY - this.cpCenter), 2))
       return Math.abs(touchOffset - this.radius) <= this.sliderTolerance
+    },
+    cpKnobMinX () {
+      return this.cpCenter + this.radius * Math.cos(this.cpMinKnobRadians)
+    },
+    cpKnobMinY () {
+      return this.cpCenter + this.radius * Math.sin(this.cpMinKnobRadians)
+    },
+    cpMinKnobRadians () {
+      return this.minKnobAngle / 180 * Math.PI
     }
   },
   methods: {
@@ -215,6 +234,7 @@ export default {
       return Math.round(val / this.stepSize) * this.stepSize
     },
     handleClick (e) {
+      // console.log('handled')
       this.setNewPosition(e)
       if (this.cpIsTouchWithinSliderRange) {
         const newAngle = this.cpSliderAngle
@@ -298,7 +318,6 @@ export default {
           this.animateSlider(newAngle, endAngle)
         }
       }
-
       window.requestAnimationFrame(animate)
     },
     defineInitialCurrentStepIndex () {
@@ -316,7 +335,6 @@ export default {
           return
         }
       }
-
       this.currentStepIndex = this.cpStepsLength
     },
     updateCurrentStepFromAngle (angle) {

From db394be7385f627ab69e9277d0821b53f69a55cf Mon Sep 17 00:00:00 2001
From: Ali Asanov <ali.a@devstark.com>
Date: Fri, 6 Dec 2019 15:51:58 +0300
Subject: [PATCH 2/9] change min and max knobs from input values

---
 demo/App.vue                    |  20 ++--
 src/components/CircleSlider.vue | 193 +++++++++++++++++++++-----------
 2 files changed, 141 insertions(+), 72 deletions(-)

diff --git a/demo/App.vue b/demo/App.vue
index 08fcc0e..c6270de 100644
--- a/demo/App.vue
+++ b/demo/App.vue
@@ -1,14 +1,18 @@
 <template>
   <div id="app">
     <circle-slider 
-      v-model="sliderValueOrZero"
+      v-model="sliderMaxValueOrZero"
       :side="300"
       :circleWidth="20"
       :knobRadius="20"
+      :minValue="sliderMinValue"
+      :minKnobColor="minKnobColor"
     >
     </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> {{ sliderMinValue }} </div>
   </div>
 </template>
 
@@ -16,16 +20,18 @@
 export default {
   data () {
     return {
-      sliderValue: 0
+      sliderMaxValue: 39,
+      sliderMinValue: 19,
+      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
       }
     }
   }
diff --git a/src/components/CircleSlider.vue b/src/components/CircleSlider.vue
index 7a4afeb..cca6c8d 100644
--- a/src/components/CircleSlider.vue
+++ b/src/components/CircleSlider.vue
@@ -9,8 +9,8 @@
       <g>
         <circle :stroke="circleColor" fill="none" :stroke-width="cpMainCircleStrokeWidth" :cx="cpCenter" :cy="cpCenter" :r="radius"></circle>
         <path :stroke="progressColor" fill="none" :stroke-width="cpPathStrokeWidth" :d="cpPathD"></path>
-        <circle :fill="knobColor" :r="cpKnobRadius" :cx="cpPathX" :cy="cpPathY"></circle>
-        <circle :fill="knobColor" :r="cpKnobRadius" :cx="cpKnobMinX" :cy="cpKnobMinY"></circle>
+        <circle :fill="maxKnobColor" :r="cpKnobRadius" :cx="cpPathX" :cy="cpPathY"></circle>
+        <circle :fill="minKnobColor" :r="cpKnobRadius" :cx="cpMinKnobX" :cy="cpMinKnobY"></circle>
       </g>
     </svg>
   </div>
@@ -26,12 +26,17 @@ export default {
 
     this.defineInitialCurrentStepIndex()
 
-    this.angle = this.cpAngleValue
-    this.currentStepValue = this.cpCurrentStep
+    this.minAngle = this.cpMinAngleValue
+    this.maxAngle = this.cpMaxAngleValue
+
+    this.currentMinStepValue = this.cpCurrentMinStep
+    this.currentMaxStepValue = this.cpCurrentMaxStep
 
     let maxCurveWidth = Math.max(this.cpMainCircleStrokeWidth, this.cpPathStrokeWidth)
     this.radius = (this.side / 2) - Math.max(maxCurveWidth, this.cpKnobRadius * 2) / 2
-    this.updateFromPropValue(this.value)
+    
+    this.updateFromPropMinValue(this.minValue)
+    this.updateFromPropMaxValue(this.value)
   },
   mounted () {
     this.containerElement = this.$refs._svg
@@ -52,6 +57,11 @@ export default {
       required: false,
       default: 0
     },
+    minValue: {
+      type: Number,
+      required: false,
+      default: 0
+    },
     side: {
       type: Number,
       required: false,
@@ -82,7 +92,12 @@ export default {
       required: false,
       default: '#00be7e'
     },
-    knobColor: {
+    minKnobColor: {
+      type: String,
+      required: false,
+      default: '#00be7e'
+    },
+    maxKnobColor: {
       type: String,
       required: false,
       default: '#00be7e'
@@ -116,11 +131,6 @@ export default {
       type: Number,
       required: false,
       default: 10
-    },
-    minKnobAngle: {
-      type: Number,
-      required: false,
-      default: 90 // degrees
     }
     // limitMin: {
     //   type: Number,
@@ -138,15 +148,19 @@ export default {
       steps: null,
       stepsCount: null,
       radius: 0,
-      angle: 0,
-      currentStepValue: 0,
+      maxAngle: 0,
+      minAngle: 0,
+      currentMinStepValue: 0,
+      currentMaxStepValue: 0,
       mousePressed: false,
       mousemoveTicks: 0,
-      currentStepIndex: 0,
+      currentMinStepIndex: 0,
+      currentMaxStepIndex: 0,
       length: 0,
       sliderTolerance: 0,
       relativeX: 0,
-      relativeY: 0
+      relativeY: 0,
+      currentKnob: ''
     }
   },
   computed: {
@@ -161,21 +175,23 @@ export default {
     cpCenter () {
       return this.side / 2
     },
-    cpAngle () {
-      return this.angle + Math.PI / 2
+    cpMinAngle () {
+      return this.minAngle + Math.PI / 2
+    },
+    cpMaxAngle () {
+      return this.maxAngle + Math.PI / 2
     },
     cpMainCircleStrokeWidth () {
       return this.circleWidth || (this.side / 2) / this.circleWidthRel
     },
     cpPathDirection () {
-      // return (this.cpAngle < 3 / 2 * Math.PI) ? 0 : 1
-      return (this.cpAngle - (this.cpMinKnobRadians - Math.PI / 2) < 3 / 2 * Math.PI) ? 0 : 1
+      return (this.cpMaxAngle - (this.cpMinAngle - Math.PI / 2) < 3 / 2 * Math.PI) ? 0 : 1
     },
     cpPathX () {
-      return this.cpCenter + this.radius * Math.cos(this.cpAngle)
+      return this.cpCenter + this.radius * Math.cos(this.cpMaxAngle)
     },
     cpPathY () {
-      return this.cpCenter + this.radius * Math.sin(this.cpAngle)
+      return this.cpCenter + this.radius * Math.sin(this.cpMaxAngle)
     },
     cpPathStrokeWidth () {
       return this.progressWidth || (this.side / 2) / this.progressWidthRel
@@ -185,10 +201,8 @@ export default {
     },
     cpPathD () {
       let parts = []
-      // parts.push('M' + this.cpCenter)
-      parts.push('M' + this.cpKnobMinX)
-      // parts.push(this.cpCenter + this.radius)
-      parts.push(this.cpKnobMinY)
+      parts.push('M' + this.cpMinKnobX)
+      parts.push(this.cpMinKnobY)
       parts.push('A')
       parts.push(this.radius)
       parts.push(this.radius)
@@ -202,31 +216,36 @@ export default {
     cpAngleUnit () {
       return (Math.PI * 2 - this.startAngleOffset) / this.cpStepsLength
     },
-    cpAngleValue () {
+    cpMinAngleValue () {
+      return (Math.min(
+        this.startAngleOffset + this.cpAngleUnit * this.currentMinStepIndex,
+        Math.PI * 2 - Number.EPSILON
+      )) - 0.00001 // correct for 100% value
+    },
+    cpMaxAngleValue () {
       return (Math.min(
-        this.startAngleOffset + this.cpAngleUnit * this.currentStepIndex,
+        this.startAngleOffset + this.cpAngleUnit * this.currentMaxStepIndex,
         Math.PI * 2 - Number.EPSILON
       )) - 0.00001 // correct for 100% value
     },
-    cpCurrentStep () {
-      return this.steps[this.currentStepIndex]
+    cpCurrentMinStep () {
+      return this.steps[this.currentMinStepIndex]
+    },
+    cpCurrentMaxStep () {
+      return this.steps[this.currentMaxStepIndex]
     },
     cpSliderAngle () {
       return (Math.atan2(this.relativeY - this.cpCenter, this.relativeX - this.cpCenter) + Math.PI * 3 / 2) % (Math.PI * 2)
     },
     cpIsTouchWithinSliderRange () {
-      // console.log('calc offset')
       const touchOffset = Math.sqrt(Math.pow(Math.abs(this.relativeX - this.cpCenter), 2) + Math.pow(Math.abs(this.relativeY - this.cpCenter), 2))
       return Math.abs(touchOffset - this.radius) <= this.sliderTolerance
     },
-    cpKnobMinX () {
-      return this.cpCenter + this.radius * Math.cos(this.cpMinKnobRadians)
-    },
-    cpKnobMinY () {
-      return this.cpCenter + this.radius * Math.sin(this.cpMinKnobRadians)
+    cpMinKnobX () {
+      return this.cpCenter + this.radius * Math.cos(this.cpMinAngle)
     },
-    cpMinKnobRadians () {
-      return this.minKnobAngle / 180 * Math.PI
+    cpMinKnobY () {
+      return this.cpCenter + this.radius * Math.sin(this.cpMinAngle)
     }
   },
   methods: {
@@ -234,11 +253,10 @@ export default {
       return Math.round(val / this.stepSize) * this.stepSize
     },
     handleClick (e) {
-      // console.log('handled')
       this.setNewPosition(e)
       if (this.cpIsTouchWithinSliderRange) {
         const newAngle = this.cpSliderAngle
-        this.animateSlider(this.angle, newAngle)
+        this.animateSlider(this.maxAngle, newAngle)
       }
     },
     handleMouseDown (e) {
@@ -279,42 +297,66 @@ export default {
         this.updateSlider()
       }
     },
-    updateAngle (angle, isAnimationFinished) {
-      this.updateCurrentStepFromAngle(angle)
-      this.angle = this.cpAngleValue
-      this.currentStepValue = this.cpCurrentStep
+    updateMinAngle (angle) {
+      this.updateCurrentMinStepFromAngle(angle)
+      this.minAngle = this.cpMinAngleValue
+
+      this.currentMinStepValue = this.cpCurrentMinStep
+    },
+    updateMaxAngle (angle, isAnimationFinished) {
+      this.updateCurrentMaxStepFromAngle(angle)
+      this.maxAngle = this.cpMaxAngleValue
+
+      this.currentMaxStepValue = this.cpCurrentMaxStep
 
       if (isAnimationFinished) {
-        this.$emit('input', this.currentStepValue)
+        this.$emit('input', this.currentMaxStepValue)
       }
     },
-    updateFromPropValue (value) {
-      let previousAngle = this.angle
+    updateFromPropMinValue (minValue) {
+      let previousAngle = this.minAngle
+      
+      let minStepValue = this.fitToStep(minValue)
+      
+      this.updateCurrentMinStepFromValue(minStepValue)
+
+      this.minAngle = this.cpMinAngleValue
+
+      this.currentMinStepValue = minStepValue
+
+      this.animateSlider(previousAngle, this.minAngle)
+    },
+    updateFromPropMaxValue (maxValue) {
+      let previousAngle = this.maxAngle
+      
+      let maxStepValue = this.fitToStep(maxValue)
       
-      let stepValue = this.fitToStep(value)
-      this.updateCurrentStepFromValue(stepValue)
+      this.updateCurrentMaxStepFromValue(maxStepValue)
+
+      this.maxAngle = this.cpMaxAngleValue
+
+      this.currentMaxStepValue = maxStepValue
 
-      this.angle = this.cpAngleValue
-      this.currentStepValue = stepValue
-      // this.$emit('input', this.currentStepValue)
-      this.animateSlider(previousAngle, this.angle)
+      this.animateSlider(previousAngle, this.maxAngle)
     },
     updateSlider () {
       const angle = this.cpSliderAngle
-      if (Math.abs(angle - this.angle) < Math.PI) {
+      if (Math.abs(angle - this.maxAngle) < Math.PI) {
         this.updateAngle(angle)
       }
     },
     animateSlider (startAngle, endAngle) {
       const direction = startAngle < endAngle ? 1 : -1
       const curveAngleMovementUnit = (direction * this.cpAngleUnit * 2) / this.stepSize
-
+      
       const animate = () => {
         if (Math.abs(endAngle - startAngle) < Math.abs(2 * curveAngleMovementUnit)) {
-          this.updateAngle(endAngle, true)
+          if (this.currentKnob === 'max') this.updateMaxAngle(endAngle, true)
+          else if (this.currentKnob === 'min') this.updateMinAngle(endAngle)
         } else {
           const newAngle = startAngle + curveAngleMovementUnit
-          this.updateAngle(newAngle, false)
+          if (this.currentKnob === 'max') this.updateMaxAngle(newAngle, false)
+          else if (this.currentKnob === 'min') this.updateMinAngle(newAngle)
           this.animateSlider(newAngle, endAngle)
         }
       }
@@ -322,24 +364,39 @@ export default {
     },
     defineInitialCurrentStepIndex () {
       for (let stepIndex in this.steps) {
+        if (this.steps[stepIndex] === this.minValue) {
+          this.currentMinStepIndex = stepIndex
+        }
         if (this.steps[stepIndex] === this.value) {
-          this.currentStepIndex = stepIndex
+          this.currentMaxStepIndex = stepIndex
           break
         }
       }
     },
-    updateCurrentStepFromValue (value) {
+    updateCurrentMinStepFromValue (minValue) {
+      for (let i = 0; i < this.cpStepsLength; i++) {
+        if (minValue <= this.steps[i]) {
+          this.currentMinStepIndex = i
+          return
+        }
+      }
+    },
+    updateCurrentMaxStepFromValue (maxValue) {
       for (let i = 0; i < this.cpStepsLength; i++) {
-        if (value <= this.steps[i]) {
-          this.currentStepIndex = i
+        if (maxValue <= this.steps[i]) {
+          this.currentMaxStepIndex = i
           return
         }
       }
-      this.currentStepIndex = this.cpStepsLength
+      this.currentMaxStepIndex = this.cpStepsLength
+    },
+    updateCurrentMinStepFromAngle (angle) {
+      const stepIndex = Math.round((angle - this.startAngleOffset) / this.cpAngleUnit)
+      this.currentMinStepIndex = Math.min(Math.max(stepIndex, 0), this.cpStepsLength)
     },
-    updateCurrentStepFromAngle (angle) {
+    updateCurrentMaxStepFromAngle (angle) {
       const stepIndex = Math.round((angle - this.startAngleOffset) / this.cpAngleUnit)
-      this.currentStepIndex = Math.min(Math.max(stepIndex, 0), this.cpStepsLength)
+      this.currentMaxStepIndex = Math.min(Math.max(stepIndex, 0), this.cpStepsLength)
     },
     setNewPosition (e) {
       const dimensions = this.containerElement.getBoundingClientRect()
@@ -349,8 +406,14 @@ export default {
   },
   watch: {
     value (val) {
-      if (val === this.currentStepValue) return 
-      this.updateFromPropValue(val)
+      if (val === this.currentMaxStepValue) return 
+      this.currentKnob = 'max'
+      this.updateFromPropMaxValue(val)
+    },
+    minValue (val) {
+      if (val === this.currentMinStepValue) return 
+      this.currentKnob = 'min'
+      this.updateFromPropMinValue(val)
     }
   }
 }

From 0cfd59849d04904caa4cfeca97b21e10148fd39f Mon Sep 17 00:00:00 2001
From: Ali Asanov <ali.a@devstark.com>
Date: Fri, 6 Dec 2019 16:18:23 +0300
Subject: [PATCH 3/9] enable updating position of knobs by mouse clicking and
 moving

---
 src/components/CircleSlider.vue | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/components/CircleSlider.vue b/src/components/CircleSlider.vue
index cca6c8d..26dc015 100644
--- a/src/components/CircleSlider.vue
+++ b/src/components/CircleSlider.vue
@@ -253,10 +253,13 @@ export default {
       return Math.round(val / this.stepSize) * this.stepSize
     },
     handleClick (e) {
+      this.currentKnob = 'min' // hardcoded for the sake of testing
+
       this.setNewPosition(e)
       if (this.cpIsTouchWithinSliderRange) {
         const newAngle = this.cpSliderAngle
-        this.animateSlider(this.maxAngle, newAngle)
+        if (this.currentKnob === 'min') this.animateSlider(this.minAngle, newAngle)
+        else if (this.currentKnob === 'max') this.animateSlider(this.maxAngle, newAngle)
       }
     },
     handleMouseDown (e) {
@@ -341,9 +344,10 @@ export default {
     },
     updateSlider () {
       const angle = this.cpSliderAngle
-      if (Math.abs(angle - this.maxAngle) < Math.PI) {
-        this.updateAngle(angle)
-      }
+      if ((this.currentKnob === 'max') && (Math.abs(angle - this.maxAngle) < Math.PI))
+        this.updateMaxAngle(angle)
+      else if ((this.currentKnob === 'min') && (Math.abs(angle - this.minAngle) < Math.PI))
+        this.updateMinAngle(angle)
     },
     animateSlider (startAngle, endAngle) {
       const direction = startAngle < endAngle ? 1 : -1

From de018fbd7b8b290f20aebf968d243c4299221ca2 Mon Sep 17 00:00:00 2001
From: Ali Asanov <ali.a@devstark.com>
Date: Fri, 6 Dec 2019 19:28:35 +0300
Subject: [PATCH 4/9] define which knob should be moved

---
 demo/App.vue                    | 14 +++++++++++---
 src/components/CircleSlider.vue | 30 +++++++++++++++++++++---------
 2 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/demo/App.vue b/demo/App.vue
index c6270de..9df8c91 100644
--- a/demo/App.vue
+++ b/demo/App.vue
@@ -5,7 +5,7 @@
       :side="300"
       :circleWidth="20"
       :knobRadius="20"
-      :minValue="sliderMinValue"
+      :minValue="sliderMinValueOrZero"
       :minKnobColor="minKnobColor"
     >
     </circle-slider>
@@ -20,8 +20,8 @@
 export default {
   data () {
     return {
-      sliderMaxValue: 39,
-      sliderMinValue: 19,
+      sliderMaxValue: 50,
+      sliderMinValue: 25,
       minKnobColor: '#EA1313'
     }
   },
@@ -33,6 +33,14 @@ export default {
       set (value) {
         this.sliderMaxValue = value
       }
+    },
+    sliderMinValueOrZero: {
+      get () {
+        return this.sliderMinValue === '' ? 0 : this.sliderMinValue
+      },
+      set (value) {
+        this.sliderMinValue = value
+      }
     }
   }
 }
diff --git a/src/components/CircleSlider.vue b/src/components/CircleSlider.vue
index 26dc015..4828956 100644
--- a/src/components/CircleSlider.vue
+++ b/src/components/CircleSlider.vue
@@ -48,7 +48,6 @@ export default {
       type: Number,
       required: false,
       default: function () {
-        // return Math.PI / 20
         return 0
       }
     },
@@ -253,11 +252,12 @@ export default {
       return Math.round(val / this.stepSize) * this.stepSize
     },
     handleClick (e) {
-      this.currentKnob = 'min' // hardcoded for the sake of testing
-
       this.setNewPosition(e)
       if (this.cpIsTouchWithinSliderRange) {
         const newAngle = this.cpSliderAngle
+
+        this.defineCurrentKnob(newAngle)
+        
         if (this.currentKnob === 'min') this.animateSlider(this.minAngle, newAngle)
         else if (this.currentKnob === 'max') this.animateSlider(this.maxAngle, newAngle)
       }
@@ -265,6 +265,13 @@ export default {
     handleMouseDown (e) {
       e.preventDefault()
       this.mousePressed = true
+
+      this.setNewPosition(e)
+      if (this.cpIsTouchWithinSliderRange) {
+        const newAngle = this.cpSliderAngle
+        this.defineCurrentKnob(newAngle)
+      }
+
       window.addEventListener('mousemove', this.handleWindowMouseMove)
       window.addEventListener('mouseup', this.handleMouseUp)
     },
@@ -297,6 +304,8 @@ export default {
 
       if (this.cpIsTouchWithinSliderRange) {
         e.preventDefault()
+        const newAngle = this.cpSliderAngle
+        this.defineCurrentKnob(newAngle)
         this.updateSlider()
       }
     },
@@ -320,26 +329,20 @@ export default {
       let previousAngle = this.minAngle
       
       let minStepValue = this.fitToStep(minValue)
-      
       this.updateCurrentMinStepFromValue(minStepValue)
 
       this.minAngle = this.cpMinAngleValue
-
       this.currentMinStepValue = minStepValue
-
       this.animateSlider(previousAngle, this.minAngle)
     },
     updateFromPropMaxValue (maxValue) {
       let previousAngle = this.maxAngle
       
       let maxStepValue = this.fitToStep(maxValue)
-      
       this.updateCurrentMaxStepFromValue(maxStepValue)
 
       this.maxAngle = this.cpMaxAngleValue
-
       this.currentMaxStepValue = maxStepValue
-
       this.animateSlider(previousAngle, this.maxAngle)
     },
     updateSlider () {
@@ -406,6 +409,15 @@ export default {
       const dimensions = this.containerElement.getBoundingClientRect()
       this.relativeX = e.clientX - dimensions.left
       this.relativeY = e.clientY - dimensions.top
+    },
+    defineCurrentKnob (newAngle) {
+      if (newAngle > this.maxAngle) this.currentKnob = 'max'
+      else if (newAngle < this.minAngle) this.currentKnob = 'min'
+      else {
+        const offsetFromMax = Math.abs(this.maxAngle - newAngle)
+        const offsetFromMin = Math.abs(this.minAngle - newAngle)
+        this.currentKnob = offsetFromMax <= offsetFromMin ? 'max' : 'min'
+      }
     }
   },
   watch: {

From ccfcb5fd3c01bd3ac6962a8e1f9b2ebfdd5d8172 Mon Sep 17 00:00:00 2001
From: Ali Asanov <ali.a@devstark.com>
Date: Mon, 9 Dec 2019 16:50:41 +0300
Subject: [PATCH 5/9] fix: make impossible for min value to be greater than max
 value

---
 demo/App.vue                    | 15 ++++++++++++---
 src/components/CircleSlider.vue | 15 +++++++++++----
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/demo/App.vue b/demo/App.vue
index 9df8c91..d69e705 100644
--- a/demo/App.vue
+++ b/demo/App.vue
@@ -6,13 +6,14 @@
       :circleWidth="20"
       :knobRadius="20"
       :minValue="sliderMinValueOrZero"
+      @input_min="sliderMinValue = 0"
       :minKnobColor="minKnobColor"
     >
     </circle-slider>
     <div class="value"> {{ sliderMaxValue }} </div>
     <input type="number" v-model.number="sliderMaxValue">
-    <input type="number" v-model.number="sliderMinValue">
-    <div> {{ sliderMinValue }} </div>
+    <input  type="number" v-model.number="sliderMinValue">
+    <div class="min-value"> {{ sliderMinValue }} </div>
   </div>
 </template>
 
@@ -66,9 +67,17 @@ export default {
     margin-top: 20px;
   }
 
+  .min-value {
+    font-size: 20px;
+    margin-top: 20px;
+  }
+
   input {
     height: 30px;
     font-size: 20px;
     margin-top: 30px;
   }
-</style>
\ No newline at end of file
+</style>
+      
+
+// @input_min="sliderMinValue = 0"
\ No newline at end of file
diff --git a/src/components/CircleSlider.vue b/src/components/CircleSlider.vue
index 4828956..521dfaf 100644
--- a/src/components/CircleSlider.vue
+++ b/src/components/CircleSlider.vue
@@ -35,8 +35,8 @@ export default {
     let maxCurveWidth = Math.max(this.cpMainCircleStrokeWidth, this.cpPathStrokeWidth)
     this.radius = (this.side / 2) - Math.max(maxCurveWidth, this.cpKnobRadius * 2) / 2
     
-    this.updateFromPropMinValue(this.minValue)
     this.updateFromPropMaxValue(this.value)
+    this.currentMinStepIndex > this.currentMaxStepIndex ? this.setDefaultMinValue() : this.updateFromPropMinValue(this.minValue)
   },
   mounted () {
     this.containerElement = this.$refs._svg
@@ -255,7 +255,6 @@ export default {
       this.setNewPosition(e)
       if (this.cpIsTouchWithinSliderRange) {
         const newAngle = this.cpSliderAngle
-
         this.defineCurrentKnob(newAngle)
         
         if (this.currentKnob === 'min') this.animateSlider(this.minAngle, newAngle)
@@ -284,6 +283,8 @@ export default {
     },
     handleWindowMouseMove (e) {
       e.preventDefault()
+      if (this.minAngle >= this.maxAngle) return
+
       if (this.mousemoveTicks < 5) {
         this.mousemoveTicks++
         return
@@ -376,7 +377,7 @@ export default {
         }
         if (this.steps[stepIndex] === this.value) {
           this.currentMaxStepIndex = stepIndex
-          break
+          // break
         }
       }
     },
@@ -418,6 +419,12 @@ export default {
         const offsetFromMin = Math.abs(this.minAngle - newAngle)
         this.currentKnob = offsetFromMax <= offsetFromMin ? 'max' : 'min'
       }
+    },
+    setDefaultMinValue () {
+      const defaultMinValue = 0
+      this.updateFromPropMinValue(defaultMinValue)
+      this.$emit('input_min') 
+      alert('"Min" value cannot be greater than "Max" value. Please set the correct value.')  
     }
   },
   watch: {
@@ -429,7 +436,7 @@ export default {
     minValue (val) {
       if (val === this.currentMinStepValue) return 
       this.currentKnob = 'min'
-      this.updateFromPropMinValue(val)
+      this.currentMinStepIndex >= this.currentMaxStepIndex ? this.setDefaultMinValue() : this.updateFromPropMinValue(val)
     }
   }
 }

From d18913e0ba20468e1299424048615bb15495a244 Mon Sep 17 00:00:00 2001
From: Ali Asanov <ali.a@devstark.com>
Date: Mon, 9 Dec 2019 17:34:16 +0300
Subject: [PATCH 6/9] fix: make 2-way binding of minValue

---
 demo/App.vue                    |  2 +-
 src/components/CircleSlider.vue | 12 ++++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/demo/App.vue b/demo/App.vue
index d69e705..1b47a6b 100644
--- a/demo/App.vue
+++ b/demo/App.vue
@@ -6,7 +6,7 @@
       :circleWidth="20"
       :knobRadius="20"
       :minValue="sliderMinValueOrZero"
-      @input_min="sliderMinValue = 0"
+      @inputMin=" value => sliderMinValue = value "
       :minKnobColor="minKnobColor"
     >
     </circle-slider>
diff --git a/src/components/CircleSlider.vue b/src/components/CircleSlider.vue
index 521dfaf..e074d47 100644
--- a/src/components/CircleSlider.vue
+++ b/src/components/CircleSlider.vue
@@ -310,11 +310,15 @@ export default {
         this.updateSlider()
       }
     },
-    updateMinAngle (angle) {
+    updateMinAngle (angle, isAnimationFinished) {
       this.updateCurrentMinStepFromAngle(angle)
       this.minAngle = this.cpMinAngleValue
 
       this.currentMinStepValue = this.cpCurrentMinStep
+        
+      if (isAnimationFinished) {
+        this.$emit('inputMin', this.currentMinStepValue) 
+      }
     },
     updateMaxAngle (angle, isAnimationFinished) {
       this.updateCurrentMaxStepFromAngle(angle)
@@ -360,11 +364,11 @@ export default {
       const animate = () => {
         if (Math.abs(endAngle - startAngle) < Math.abs(2 * curveAngleMovementUnit)) {
           if (this.currentKnob === 'max') this.updateMaxAngle(endAngle, true)
-          else if (this.currentKnob === 'min') this.updateMinAngle(endAngle)
+          else if (this.currentKnob === 'min') this.updateMinAngle(endAngle, true)
         } else {
           const newAngle = startAngle + curveAngleMovementUnit
           if (this.currentKnob === 'max') this.updateMaxAngle(newAngle, false)
-          else if (this.currentKnob === 'min') this.updateMinAngle(newAngle)
+          else if (this.currentKnob === 'min') this.updateMinAngle(newAngle, false)
           this.animateSlider(newAngle, endAngle)
         }
       }
@@ -423,7 +427,7 @@ export default {
     setDefaultMinValue () {
       const defaultMinValue = 0
       this.updateFromPropMinValue(defaultMinValue)
-      this.$emit('input_min') 
+      this.$emit('inputMin', defaultMinValue) 
       alert('"Min" value cannot be greater than "Max" value. Please set the correct value.')  
     }
   },

From 7fea0c36dcb9f6ad14a236c3f82aaf4267dd7be3 Mon Sep 17 00:00:00 2001
From: Ali Asanov <ali.a@devstark.com>
Date: Mon, 9 Dec 2019 18:21:39 +0300
Subject: [PATCH 7/9] fix: fix progress stroke disappearing when minValue = 0
 and maxValue = 100, i.e. when knobs are at the same position

---
 demo/App.vue                    | 6 +++---
 src/components/CircleSlider.vue | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/demo/App.vue b/demo/App.vue
index 1b47a6b..3127b3b 100644
--- a/demo/App.vue
+++ b/demo/App.vue
@@ -21,9 +21,9 @@
 export default {
   data () {
     return {
-      sliderMaxValue: 50,
-      sliderMinValue: 25,
-      minKnobColor: '#EA1313'
+      sliderMaxValue: 0,
+      sliderMinValue: 0,
+      // minKnobColor: '#EA1313'
     }
   },
   computed: {
diff --git a/src/components/CircleSlider.vue b/src/components/CircleSlider.vue
index e074d47..c15f2ff 100644
--- a/src/components/CircleSlider.vue
+++ b/src/components/CircleSlider.vue
@@ -219,7 +219,7 @@ export default {
       return (Math.min(
         this.startAngleOffset + this.cpAngleUnit * this.currentMinStepIndex,
         Math.PI * 2 - Number.EPSILON
-      )) - 0.00001 // correct for 100% value
+      )) // - 0.00001 // correct for 100% value
     },
     cpMaxAngleValue () {
       return (Math.min(

From a9569801319b32ef68ffe0e8bccefe70bddda8f4 Mon Sep 17 00:00:00 2001
From: Ali Asanov <ali.a@devstark.com>
Date: Mon, 9 Dec 2019 18:50:13 +0300
Subject: [PATCH 8/9] add props for minValue knob

---
 demo/App.vue                    |  9 +++------
 src/components/CircleSlider.vue | 27 ++++++++++++++++++++-------
 2 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/demo/App.vue b/demo/App.vue
index 3127b3b..f9388f4 100644
--- a/demo/App.vue
+++ b/demo/App.vue
@@ -4,10 +4,10 @@
       v-model="sliderMaxValueOrZero"
       :side="300"
       :circleWidth="20"
-      :knobRadius="20"
+      :maxKnobRadius="20"
+      :minKnobRadius="20"
       :minValue="sliderMinValueOrZero"
       @inputMin=" value => sliderMinValue = value "
-      :minKnobColor="minKnobColor"
     >
     </circle-slider>
     <div class="value"> {{ sliderMaxValue }} </div>
@@ -77,7 +77,4 @@ export default {
     font-size: 20px;
     margin-top: 30px;
   }
-</style>
-      
-
-// @input_min="sliderMinValue = 0"
\ No newline at end of file
+</style>
\ No newline at end of file
diff --git a/src/components/CircleSlider.vue b/src/components/CircleSlider.vue
index c15f2ff..f24f28d 100644
--- a/src/components/CircleSlider.vue
+++ b/src/components/CircleSlider.vue
@@ -9,8 +9,8 @@
       <g>
         <circle :stroke="circleColor" fill="none" :stroke-width="cpMainCircleStrokeWidth" :cx="cpCenter" :cy="cpCenter" :r="radius"></circle>
         <path :stroke="progressColor" fill="none" :stroke-width="cpPathStrokeWidth" :d="cpPathD"></path>
-        <circle :fill="maxKnobColor" :r="cpKnobRadius" :cx="cpPathX" :cy="cpPathY"></circle>
-        <circle :fill="minKnobColor" :r="cpKnobRadius" :cx="cpMinKnobX" :cy="cpMinKnobY"></circle>
+        <circle :fill="maxKnobColor" :r="cpMaxKnobRadius" :cx="cpPathX" :cy="cpPathY"></circle>
+        <circle :fill="minKnobColor" :r="cpMinKnobRadius" :cx="cpMinKnobX" :cy="cpMinKnobY"></circle>
       </g>
     </svg>
   </div>
@@ -33,7 +33,7 @@ export default {
     this.currentMaxStepValue = this.cpCurrentMaxStep
 
     let maxCurveWidth = Math.max(this.cpMainCircleStrokeWidth, this.cpPathStrokeWidth)
-    this.radius = (this.side / 2) - Math.max(maxCurveWidth, this.cpKnobRadius * 2) / 2
+    this.radius = (this.side / 2) - Math.max(maxCurveWidth, this.cpMinKnobRadius * 2, this.cpMaxKnobRadius * 2) / 2
     
     this.updateFromPropMaxValue(this.value)
     this.currentMinStepIndex > this.currentMaxStepIndex ? this.setDefaultMinValue() : this.updateFromPropMinValue(this.minValue)
@@ -101,12 +101,22 @@ export default {
       required: false,
       default: '#00be7e'
     },
-    knobRadius: {
+    minKnobRadius: {
       type: Number,
       required: false,
       default: null
     },
-    knobRadiusRel: {
+    minKnobRadiusRel: {
+      type: Number,
+      required: false,
+      default: 7
+    },
+    maxKnobRadius: {
+      type: Number,
+      required: false,
+      default: null
+    },
+    maxKnobRadiusRel: {
       type: Number,
       required: false,
       default: 7
@@ -195,8 +205,11 @@ export default {
     cpPathStrokeWidth () {
       return this.progressWidth || (this.side / 2) / this.progressWidthRel
     },
-    cpKnobRadius () {
-      return this.knobRadius || (this.side / 2) / this.knobRadiusRel
+    cpMinKnobRadius () {
+      return this.minKnobRadius || (this.side / 2) / this.minKnobRadiusRel
+    },
+    cpMaxKnobRadius () {
+      return this.maxKnobRadius || (this.side / 2) / this.maxKnobRadiusRel
     },
     cpPathD () {
       let parts = []

From a1458bc8c82b499191a243378016999128ebcffd Mon Sep 17 00:00:00 2001
From: Ali Asanov <ali.a@devstark.com>
Date: Mon, 9 Dec 2019 19:43:43 +0300
Subject: [PATCH 9/9] add prop for enabling 'rangeSlider' feature, limit
 minValue to maxValue value

---
 demo/App.vue                    |  1 +
 src/components/CircleSlider.vue | 17 +++++++++++++----
 2 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/demo/App.vue b/demo/App.vue
index f9388f4..4c95741 100644
--- a/demo/App.vue
+++ b/demo/App.vue
@@ -8,6 +8,7 @@
       :minKnobRadius="20"
       :minValue="sliderMinValueOrZero"
       @inputMin=" value => sliderMinValue = value "
+      :rangeSlider="true"
     >
     </circle-slider>
     <div class="value"> {{ sliderMaxValue }} </div>
diff --git a/src/components/CircleSlider.vue b/src/components/CircleSlider.vue
index f24f28d..6ac21c4 100644
--- a/src/components/CircleSlider.vue
+++ b/src/components/CircleSlider.vue
@@ -10,7 +10,7 @@
         <circle :stroke="circleColor" fill="none" :stroke-width="cpMainCircleStrokeWidth" :cx="cpCenter" :cy="cpCenter" :r="radius"></circle>
         <path :stroke="progressColor" fill="none" :stroke-width="cpPathStrokeWidth" :d="cpPathD"></path>
         <circle :fill="maxKnobColor" :r="cpMaxKnobRadius" :cx="cpPathX" :cy="cpPathY"></circle>
-        <circle :fill="minKnobColor" :r="cpMinKnobRadius" :cx="cpMinKnobX" :cy="cpMinKnobY"></circle>
+        <circle v-if="rangeSlider" :fill="minKnobColor" :r="cpMinKnobRadius" :cx="cpMinKnobX" :cy="cpMinKnobY"></circle>
       </g>
     </svg>
   </div>
@@ -140,6 +140,11 @@ export default {
       type: Number,
       required: false,
       default: 10
+    },
+    rangeSlider: {
+      type: Boolean,
+      required: false,
+      default: false
     }
     // limitMin: {
     //   type: Number,
@@ -429,6 +434,11 @@ export default {
       this.relativeY = e.clientY - dimensions.top
     },
     defineCurrentKnob (newAngle) {
+      if (!this.rangeSlider) {
+        this.currentKnob = 'max'
+        return  
+      }
+
       if (newAngle > this.maxAngle) this.currentKnob = 'max'
       else if (newAngle < this.minAngle) this.currentKnob = 'min'
       else {
@@ -438,10 +448,9 @@ export default {
       }
     },
     setDefaultMinValue () {
-      const defaultMinValue = 0
+      const defaultMinValue = this.currentMaxStepValue
       this.updateFromPropMinValue(defaultMinValue)
       this.$emit('inputMin', defaultMinValue) 
-      alert('"Min" value cannot be greater than "Max" value. Please set the correct value.')  
     }
   },
   watch: {
@@ -451,7 +460,7 @@ export default {
       this.updateFromPropMaxValue(val)
     },
     minValue (val) {
-      if (val === this.currentMinStepValue) return 
+      if (!this.rangeSlider || val === this.currentMinStepValue) return 
       this.currentKnob = 'min'
       this.currentMinStepIndex >= this.currentMaxStepIndex ? this.setDefaultMinValue() : this.updateFromPropMinValue(val)
     }