UPD: Refine pixel bar

src/components/device-gui/PixelBarTest.vue

@@ -2,6 +2,10 @@
 import { ref, computed } from 'vue'
 import { Input } from '@/components/ui/input'
 
+const model = defineModel()
+
+const bar = ref(null);
+
 const width = ref(160)
 const count = ref(40)
 const percent = ref(60)
@@ -13,14 +17,28 @@ const rect_width = computed(() => {
   return (width.value - ((count.value + 1) * gap_width.value)) / (count.value)
 })
 const current_pos = computed(() => {
-  return Math.round((percent.value / 100) * count.value)
+  return Math.round((percent.value / 100) * (count.value - 1))
 })
+function onMouseDown() {
+  window.addEventListener('mousemove', onMouseMove)
+  window.addEventListener('mouseup', onMouseUp)
+}
+function onMouseMove(e) {
+  const rect = bar.value.getBoundingClientRect()
+  percent.value = Math.max(0, Math.min(Math.round((e.clientX - rect.left - 9) / (width.value - 6) * 100), 100))
+  model.value = percent.value
+}
+function onMouseUp() {
+  window.removeEventListener('mousemove', onMouseMove)
+  window.removeEventListener('mouseup', onMouseUp)
+}
 </script>
 
 <template>
   <div class="flex-1 flex flex-col justify-center items-center my-2">
     {{ current_pos }}
-    <svg xmlns="http://www.w3.org/2000/svg" :width="width+12" height="16">
+    <span @mousedown="onMouseDown">
+      <svg ref="bar" xmlns="http://www.w3.org/2000/svg" :width="width+12" height="16">
         <g>
           <rect
             v-for="(_, i) in count"
@@ -62,6 +80,7 @@ const current_pos = computed(() => {
           </g>
         </g>
       </svg>
+    </span>
     <div v-if="show_controls  ">
       <Input v-model="percent" type="number" min="0" max="100" placeholder="Fill" class="m-2" />
       <Input v-model="count" type="number" min="1" placeholder="Count" class="m-2" />