add circleGap property

README.md

@@ -58,7 +58,7 @@ export default {
 
 | Name             | Type     | Required | Default    | Rules                                                         |
 | ---------------- | -------- | -------- | ---------- | ------------------------------------------------------------- |
-| v-model          | Number   | ✔️       |            |                                                               |
+| v-model          | Number   | ✔️        |            |                                                               |
 | width            | String   |          | 100%       | must be valid css length                                      |
 | height           | Number   |          | 6          |                                                               |
 | handleScale      | Number   |          | 1.35       |                                                               |
@@ -80,6 +80,7 @@ export default {
 | sticky           | Boolean  |          | false      |                                                               |
 | flip             | Boolean  |          | false      |                                                               |
 | circleOffset     | Number   |          | 0          | must be between 0 and 360 (inclusive)                         |
+| circleGap        | Number   |          | 0          | must be between 0 and 360                                     |
 
 **NOTE: When using the circular slider width is the diameter of the circle and height is the stroke width**
 

dev/serve.vue

@@ -28,6 +28,7 @@ export default defineComponent({
       flip: false,
       disabled: false,
       circleOffset: 0,
+      circleGap: 0,
       alwaysShowTooltip: false,
       alwaysShowHandle: false,
       flipTooltip: false,
@@ -168,6 +169,23 @@ export default defineComponent({
         />
       </div>
 
+      <div class="item">
+        <h2>circle gap:</h2>
+        <vue3-slider
+          class="slider"
+          v-model="circleGap"
+          tooltip
+          :height="8"
+          :min="0"
+          :max="360"
+          :step="1"
+          trackColor="rgba(0,0,0,0.15)"
+          color="#005CC8"
+          tooltipColor="black"
+          tooltipTextColor="white"
+        />
+      </div>
+
       <div class="item">
         <h2>handle scale:</h2>
         <vue3-slider
@@ -282,6 +300,7 @@ export default defineComponent({
     :sticky="sticky"
     :flip="flip"
     :circleOffset="circleOffset"
+    :circleGap="circleGap"
     :disabled="disabled"
   />
   <h1>{{ sliderVal }}</h1>
@@ -329,7 +348,7 @@ h1 {
 }
 
 .controls.expand .inputs {
-  height: 670px;
+  height: 770px;
   opacity: 1;
 }
 

src/hooks/useDragHandler.ts

@@ -58,15 +58,18 @@ export default function(
         }
       }
 
-      const valPerDeg = store.sliderRange.value / 360;
-      value = angle * valPerDeg - props.circleOffset * valPerDeg;
-      if (value < 0) {
-        value += store.sliderRange.value;
+      angle -= props.circleOffset;
+      while (angle < 0) {
+        angle += 360;
       }
+
       if (props.flip) {
-        value = store.sliderRange.value - value;
+        angle = 360 - angle;
       }
 
+      const valPerDeg = store.sliderRange.value / (360 - props.circleGap);
+      value = angle * valPerDeg;
+
       // stop value from going to 0 when at max
       if (!props.repeat && dragging) {
         const diff = Math.abs(value - previousSliderValue);

src/props.ts

@@ -23,6 +23,7 @@ export type Props = Readonly<{
   sticky: boolean;
   flip: boolean;
   circleOffset: number;
+  circleGap: number;
   disabled: boolean;
 }>;
 
@@ -155,6 +156,13 @@ export default {
       return val >= 0 && val <= 360;
     },
   },
+  circleGap: {
+    type: Number,
+    default: 0,
+    validator(val: number) {
+      return val >= 0 && val <= 360;
+    },
+  },
   disabled: {
     type: Boolean,
     default: false,

src/store.ts

@@ -43,7 +43,7 @@ export function useStore(props: Props): Store {
   const sliderValueDegrees = computed(() => {
     if (props.orientation !== "circular") return 0;
 
-    const degrees = modelValueUnrounded.value / (sliderRange.value / 360);
+    const degrees = modelValueUnrounded.value / (sliderRange.value / (360 - props.circleGap));
     return props.flip ? -degrees : degrees;
   });
 

src/vue3-slider.vue

@@ -125,13 +125,19 @@ export default defineComponent({
       return 2 * Math.PI * (store.sliderWidth.value / 2);
     });
 
+    const trackStrokeOffset = computed(() => {
+      if (props.orientation !== "circular") return 0;
+
+      return props.circleGap / 360 * circumference.value;
+    });
+
     const strokeOffset = computed(() => {
       if (props.orientation !== "circular") return 0;
 
-      return (
-        ((store.sliderRange.value - store.modelValueUnrounded.value) /
-          store.sliderRange.value) *
-        circumference.value
+      return circumference.value - (
+        (store.modelValueUnrounded.value / store.sliderRange.value) * 
+        (circumference.value) * 
+        (1 - props.circleGap / 360)
       );
     });
 
@@ -169,8 +175,10 @@ export default defineComponent({
       tooltipOffset,
       vars,
       circumference,
+      trackStrokeOffset,
       strokeOffset,
       circleOffset: computed(() => props.circleOffset),
+      circleGap: computed(() => props.circleGap),
       sliderValueDegrees: store.sliderValueDegrees,
     };
   },
@@ -313,13 +321,22 @@ export default defineComponent({
       style="overflow: visible"
     >
       <circle
+        :style="{
+          transform: `rotate(${-90 + circleOffset}deg) ${
+            flip ? 'scaleY(-1)' : ''
+          }`,
+        }"
+        style="transform-origin: center"
         stroke="var(--track-color)"
         vector-effect="non-scaling-stroke"
         fill="none"
         stroke-width="var(--height)"
+        stroke-linecap="round"
         r="50%"
         cx="50"
         cy="50"
+        :stroke-dasharray="circumference"
+        :stroke-dashoffset="trackStrokeOffset"
       ></circle>
 
       <circle