adds ruler

UmbraJS · Sep 29, 2024 · 10cc4d0 · 10cc4d0
1 parent 935e081
commit 10cc4d0
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 114 deletions.
diff --git a/packages/nobel/components/ui/Slider/Slider copy.vue b/packages/nobel/components/ui/Slider/Slider copy.vue
diff --git a/packages/nobel/components/ui/Slider/Slider.vue b/packages/nobel/components/ui/Slider/Slider.vue
@@ -4,6 +4,7 @@ import { useSliderKeys } from './useSliderKeys'
 import { useSliderValue } from './useSliderValue'
 import SnapPoints from './SnapPoints.vue'
 import SliderHandle from './SliderHandle.vue'
+import SliderRuler from './SliderRuler.vue'
 
 const slider = useTemplateRef<HTMLDivElement>('slider')
 const track = useTemplateRef<HTMLDivElement>('track')
@@ -24,6 +25,7 @@ watch(pressed, (isPressed) => {
 <template>
   <p>{{ left }}</p>
   <p>{{ size }}</p>
+  <SliderRuler :value="size" :max="100" :snapPoints="snapPoints" />
   <div
     ref="slider"
     tabindex="1"

diff --git a/packages/nobel/components/ui/Slider/SliderRuler.vue b/packages/nobel/components/ui/Slider/SliderRuler.vue
@@ -0,0 +1,40 @@
+<script lang="ts" setup>
+defineProps<{
+  value: number
+  max: number
+  snapPoints: number[]
+}>()
+</script>
+
+<template>
+  <div class="slider-ruler border">
+    <div
+      v-for="tick in max"
+      :key="tick"
+      class="tick"
+      :class="{ mark: snapPoints.includes(tick) }"
+    ></div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.slider-ruler {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  height: var(--block);
+  padding: 0 var(--space-2);
+}
+
+.slider-ruler .tick {
+  height: 50%;
+  width: 0.2px;
+  background: var(--base-80);
+}
+
+.slider-ruler .tick.mark {
+  background: var(--base-120);
+  height: 100%;
+}
+</style>
diff --git a/packages/nobel/components/ui/Slider/useSliderSnap.ts b/packages/nobel/components/ui/Slider/useSliderSnap.ts