ADD: SteppedSlider component

src/components/config/SteppedSlider.vue

@@ -0,0 +1,97 @@
+<template>
+  <div class="flex flex-col p-8 pt-4">
+    <span class="text-sm text-muted-foreground font-mono">{{ label }}</span>
+    <Slider
+      ref="steppedSlider" v-model="sliderModelValue" :max="max" :step="1"
+      class="pt-4" />
+    <div class="flex justify-between py-1">
+      <button
+        v-for="(position, index) in positions" :key="position"
+        :class="{
+          'slider-start mr-2.5': index===0,
+          'slider-center': index > 0 && index < positions.length-1,
+          'slider-end ml-2.5': index === positions.length-1}"
+        @click="value = position.value">
+        <span class="text-xs text-muted-foreground font-mono">{{ position.label || '|' }}</span>
+      </button>
+    </div>
+  </div>
+</template>
+<script setup>
+import { Slider } from '@/components/ui/slider'
+import { computed, onBeforeMount } from 'vue'
+
+const value = defineModel({
+  type: Number,
+  default: 0,
+})
+
+const sliderModelValue = computed({
+  get: () => [value.value],
+  set: (val) => {
+    value.value = val[0]
+  },
+})
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: null,
+  },
+  max: {
+    type: Number,
+    default: 4,
+  },
+  namedPositions: {
+    type: Array,
+    default: () => [
+      {
+        label: 'Min',
+        value: 0,
+      },
+      {
+        label: 'Default',
+        value: 2,
+      },
+      {
+        label: 'Max',
+        value: 4,
+      },
+    ],
+  },
+  markers: {
+    type: Boolean,
+    default: true,
+  },
+})
+
+const positions = computed(() => {
+  const filled = []
+  for (let i = 0; i <= props.max; i++) {
+    filled.push(props.namedPositions.find((p) => p.value === i) || (props.markers && { value: i }))
+  }
+  return filled
+})
+</script>
+<style scoped>
+.slider-start {
+  text-align: left;
+}
+
+.slider-center {
+  text-align: center;
+}
+
+.slider-end {
+  text-align: right;
+}
+
+.slider-start,
+.slider-end {
+  flex: 0.5;
+}
+
+.slider-center {
+  flex: 1;
+}
+</style>

src/components/config/pages/HapticConfig.vue

@@ -82,49 +82,17 @@
           :title="$t('config_options.feedback_designer.haptic_response.title')"
           :icon-component="AudioWaveform"
           :show-toggle="true">
-          <div class="flex flex-col p-8 pt-4">
-                      <span
-                        class="text-sm text-muted-foreground font-mono">{{ $t('config_options.feedback_designer.haptic_response.feedback_strength')
-                        }}</span>
-            <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
-            <div class="flex flex-row px-1 py-1.5">
-              <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
-              <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
-              <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
-              <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
-              <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
-            </div>
-
-          </div>
+          <SteppedSlider
+            v-model="feedbackStrength"
+            :label="$t('config_options.feedback_designer.haptic_response.feedback_strength')" />
           <Separator />
-          <div class="flex flex-col p-8 pt-4">
-                      <span
-                        class="text-sm text-muted-foreground font-mono">{{ $t('config_options.feedback_designer.haptic_response.bounce_back_strength')
-                        }}</span>
-            <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
-            <div class="flex flex-row px-1 py-1.5">
-              <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
-              <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
-              <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
-              <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
-              <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
-            </div>
-          </div>
+          <SteppedSlider
+            v-model="bounceBackStrength"
+            :label="$t('config_options.feedback_designer.haptic_response.bounce_back_strength')" />
           <Separator />
-          <div class="flex flex-col p-8 pt-4">
-                      <span
-                        class="text-sm text-muted-foreground font-mono">{{ $t('config_options.feedback_designer.haptic_response.output_ramp_dampening')
-                        }}</span>
-            <Slider :default-value="[4]" :max="4" :step="1" class="pt-4" />
-            <div class="flex flex-row px-1 py-1.5">
-              <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Min</div>
-              <div class="flex-1 text-xs text-muted-foreground font-mono indent-4">|</div>
-              <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
-              <div class="flex-1 text-xs text-muted-foreground font-mono indent-10">|</div>
-              <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Max</div>
-            </div>
-
-          </div>
+          <SteppedSlider
+            v-model="outputRampDampening"
+            :label="$t('config_options.feedback_designer.haptic_response.output_ramp_dampening')" />
         </ConfigSection>
         <ConfigSection
           :title="$t('config_options.feedback_designer.auditory_response.title')"
@@ -143,19 +111,15 @@
             </div>
           </div>
           <Separator />
-          <div class="flex flex-col p-8 pt-4">
-            <span
-              class="text-sm text-muted-foreground font-mono">{{ $t('config_options.feedback_designer.auditory_response.magnitude')
-              }}</span>
-            <Slider :default-value="[2]" :max="4" :step="1" class="pt-4" />
-            <div class="flex flex-row px-1 py-1.5">
-              <div class="flex-1 text-xs text-muted-foreground font-mono text-left">Faint</div>
-              <div class="flex-1 text-xs text-muted-foreground font-mono indent-2">Soft</div>
-              <div class="flex-1 text-xs text-muted-foreground font-mono indent-3">Default</div>
-              <div class="flex-1 text-xs text-muted-foreground font-mono indent-7">Medium</div>
-              <div class="flex-1 text-xs text-muted-foreground font-mono text-right">Hard</div>
-            </div>
-          </div>
+          <SteppedSlider
+            v-model="auditoryMagnitude"
+            :label="$t('config_options.feedback_designer.auditory_response.magnitude')"
+            :max="3"
+            :named-positions="[
+              {value:0, label: 'Faint'},
+              {value:1, label: 'Soft'},
+              {value:2, label: 'Normal'},
+              {value:3, label: 'Loud'}]" />
         </ConfigSection>
       </ScrollArea>
       <Separator />
@@ -166,19 +130,16 @@
 import { ScrollArea } from '@/components/ui/scroll-area/index.js'
 import { Tabs } from '@/components/ui/tabs/index.js'
 import { Slider } from '@/components/ui/slider/index.js'
-import { GaugeCircle, AudioLines, AudioWaveform } from 'lucide-vue-next'
+import { AudioLines, AudioWaveform, GaugeCircle } from 'lucide-vue-next'
 import ConfigSection from '@/components/config/ConfigSection.vue'
-</script>
-<style scoped>
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
+import SteppedSlider from '@/components/config/SteppedSlider.vue'
+import { ref } from 'vue'
 
-/* Firefox */
-input[type=number] {
-  -moz-appearance: textfield;
-  text-align: center;
-}
-</style>
+const feedbackStrength = ref(2)
+const bounceBackStrength = ref(2)
+const outputRampDampening = ref(2)
+
+const auditoryHapticLevel = ref(2)
+const auditoryMagnitude = ref(2)
+
+</script>