add logic which enables setting starting position at any place on the circle

demo/App.vue

@@ -8,7 +8,7 @@
       :side="300"
       :circleWidth="20"
       :knobRadius="20"
-      :stepSize="10"
+      :startPosition="300"
     >
     </circle-slider>
     <div class="value"> {{ sliderValue }} </div>

src/components/CircleSlider.vue

@@ -35,14 +35,19 @@ export default {
   mounted () {
     this.containerElement = this.$refs._svg
     this.sliderTolerance = this.radius / 2
-    this.setNewPosition({x: 0, y: 0})
+
+    this.setInitialPosition()
   },
   props: {
+    startPosition: {
+      type: Number,
+      required: false,
+      default: 90 // degrees 
+    },
     startAngleOffset: {
       type: Number,
       required: false,
       default: function () {
-        // return Math.PI / 20
         return 0
       }
     },
@@ -140,7 +145,8 @@ export default {
       length: 0,
       sliderTolerance: 0,
       relativeX: 0,
-      relativeY: 0
+      relativeY: 0,
+      redundantAngle: 0
     }
   },
   computed: {
@@ -156,13 +162,13 @@ export default {
       return this.side / 2
     },
     cpAngle () {
-      return this.angle + Math.PI / 2
+      return this.angle + this.cpStartPositionRadians
     },
     cpMainCircleStrokeWidth () {
       return this.circleWidth || (this.side / 2) / this.circleWidthRel
     },
     cpPathDirection () {
-      return (this.cpAngle < 3 / 2 * Math.PI) ? 0 : 1
+      return ((this.angle + Math.PI / 2) < 3 / 2 * Math.PI) ? 0 : 1
     },
     cpPathX () {
       return this.cpCenter + this.radius * Math.cos(this.cpAngle)
@@ -176,10 +182,16 @@ export default {
     cpKnobRadius () {
       return this.knobRadius || (this.side / 2) / this.knobRadiusRel
     },
+    cpKnobStartX () {
+      return this.cpCenter + this.radius * Math.cos(this.cpStartPositionRadians)
+    },
+    cpKnobStartY () {
+      return this.cpCenter + this.radius * Math.sin(this.cpStartPositionRadians)
+    },  
     cpPathD () {
       let parts = []
-      parts.push('M' + this.cpCenter)
-      parts.push(this.cpCenter + this.radius)
+      parts.push('M' + this.cpKnobStartX)
+      parts.push(this.cpKnobStartY)
       parts.push('A')
       parts.push(this.radius)
       parts.push(this.radius)
@@ -203,11 +215,14 @@ export default {
       return this.steps[this.currentStepIndex]
     },
     cpSliderAngle () {
-      return (Math.atan2(this.relativeY - this.cpCenter, this.relativeX - this.cpCenter) + Math.PI * 3 / 2) % (Math.PI * 2)
+      return (Math.atan2(this.relativeY - this.cpCenter, this.relativeX - this.cpCenter) + this.cpStartPositionRadians * 3 - this.redundantAngle + this.startAngleOffset) % (Math.PI * 2)
     },
     cpIsTouchWithinSliderRange () {
       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
+    },
+    cpStartPositionRadians () {
+      return this.startPosition / 180 * Math.PI
     }
   },
   methods: {
@@ -276,7 +291,6 @@ export default {
 
       this.angle = this.cpAngleValue
       this.currentStepValue = stepValue
-      // this.$emit('input', this.currentStepValue)
       this.animateSlider(previousAngle, this.angle)
     },
     updateSlider () {
@@ -325,8 +339,24 @@ export default {
     },
     setNewPosition (e) {
       const dimensions = this.containerElement.getBoundingClientRect()
-      this.relativeX = e.clientX - dimensions.left
-      this.relativeY = e.clientY - dimensions.top
+      this.relativeX = ( e.clientX || e.x ) - dimensions.left
+      this.relativeY = ( e.clientY || e.y ) - dimensions.top
+
+      this.calculateRedundantAngle()
+    },
+    calculateRedundantAngle () {
+      const totalAngle = Math.atan2(this.relativeY - this.cpCenter, this.relativeX - this.cpCenter) + this.cpStartPositionRadians * 3
+
+      if ((this.cpStartPositionRadians !== Math.PI / 2) && !this.redundantAngle) {
+        this.redundantAngle = totalAngle - (Math.PI * 2)
+      }
+    },
+    setInitialPosition () {
+      const dimensions = this.containerElement.getBoundingClientRect()
+      const x = (this.cpPathX + dimensions.left).toFixed(0)
+      const y = (this.cpPathY + dimensions.top).toFixed(0)
+
+      this.setNewPosition({x, y})
     }
   },
   watch: {