feat: custom step values

freddie-nelson · Oct 4, 2024 · d00519e · d00519e
1 parent 972be5f
commit d00519e
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 46 deletions.
diff --git a/dev/serve.vue b/dev/serve.vue
@@ -32,8 +32,18 @@ export default defineComponent({
       alwaysShowTooltip: false,
       alwaysShowHandle: false,
       flipTooltip: false,
+      customSliderStepsText: "",
     };
   },
+  computed: {
+    customSliderSteps(): number[] | undefined {
+      if (this.customSliderStepsText) {
+        return this.customSliderStepsText.split(",").map((step: string) => Number(step.trim()));
+      }
+
+      return undefined;
+    },
+  },
   methods: {
     openControls() {
       if (!this.expand) {
@@ -215,11 +225,7 @@ export default defineComponent({
 
       <div class="item">
         <h2>alwaysShowTooltip:</h2>
-        <input
-          type="checkbox"
-          name="alwaysShowTooltip"
-          v-model="alwaysShowTooltip"
-        />
+        <input type="checkbox" name="alwaysShowTooltip" v-model="alwaysShowTooltip" />
       </div>
 
       <div class="item">
@@ -229,11 +235,7 @@ export default defineComponent({
 
       <div class="item">
         <h2>alwaysShowHandle:</h2>
-        <input
-          type="checkbox"
-          name="alwaysShowHandle"
-          v-model="alwaysShowHandle"
-        />
+        <input type="checkbox" name="alwaysShowHandle" v-model="alwaysShowHandle" />
       </div>
 
       <div class="item">
@@ -270,6 +272,11 @@ export default defineComponent({
         <input type="checkbox" name="disabled" v-model="disabled" />
       </div>
 
+      <div class="item">
+        <h2>custom slider steps:</h2>
+        <input type="text" name="customSliderStepsText" v-model="customSliderStepsText" />
+      </div>
+
       <button @click="sliderVal += 10">Add 10 to slider value</button>
       <button @click="sliderVal -= 10">Minus 10 from slider value</button>
     </div>
@@ -302,6 +309,7 @@ export default defineComponent({
     :circleOffset="circleOffset"
     :circleGap="circleGap"
     :disabled="disabled"
+    :customSliderSteps="customSliderSteps"
   />
   <h1>{{ sliderVal }}</h1>
 </template>
@@ -350,6 +358,7 @@ h1 {
 .controls.expand .inputs {
   height: 770px;
   opacity: 1;
+  overflow-y: scroll;
 }
 
 .controls .inputs {

diff --git a/src/hooks/useModelValue.ts b/src/hooks/useModelValue.ts
@@ -41,6 +41,18 @@ export default function(store: Store, props: Props, emit: SetupContext["emit"])
     // get between min and max
     roundedVal = roundedVal + props.min;
 
+    // apply custom steps
+    if (props.customSliderSteps) {
+      let closestStep = props.customSliderSteps[0];
+      for (const step of props.customSliderSteps) {
+        if (Math.abs(roundedVal - step) < Math.abs(roundedVal - closestStep)) {
+          closestStep = step;
+        }
+      }
+
+      roundedVal = closestStep;
+    }
+
     // apply limit
     if (props.limit !== undefined) roundedVal = Math.min(roundedVal, props.limit);
 

diff --git a/src/props.ts b/src/props.ts
@@ -25,6 +25,7 @@ export type Props = Readonly<{
   circleOffset: number;
   circleGap: number;
   disabled: boolean;
+  customSliderSteps?: number[];
 }>;
 
 export default {
@@ -167,4 +168,8 @@ export default {
     type: Boolean,
     default: false,
   },
+  customSliderSteps: {
+    type: Array as () => number[] | undefined,
+    default: undefined,
+  },
 };
diff --git a/tsconfig.json b/tsconfig.json
@@ -1,39 +1,26 @@
 {
-    "compilerOptions": {
-        "target": "esnext",
-        "module": "esnext",
-        "strict": true,
-        "declaration": true,
-        "declarationDir": "dist",
-        "noUnusedLocals": true,
-        "noUnusedParameters": true,
-        "importHelpers": true,
-        "moduleResolution": "node",
-        "allowJs": true,
-        "experimentalDecorators": true,
-        "esModuleInterop": true,
-        "allowSyntheticDefaultImports": true,
-        "sourceMap": true,
-        "baseUrl": ".",
-        "types": [
-            "node",
-            "vue",
-            "resize-observer-browser"
-        ],
-        "paths": {
-            "@/*": [
-                "src/*"
-            ]
-        },
-        "lib": [
-            "esnext",
-            "dom",
-            "dom.iterable",
-            "scripthost"
-        ]
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "strict": true,
+    "noImplicitThis": true,
+    "declaration": true,
+    "declarationDir": "dist",
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "allowJs": true,
+    "experimentalDecorators": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": ["node", "vue", "resize-observer-browser"],
+    "paths": {
+      "@/*": ["src/*"]
     },
-    "exclude": [
-        "node_modules",
-        "dist"
-    ]
+    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
+  },
+  "exclude": ["node_modules", "dist"]
 }