Fix the scale under the slider

index.html

@@ -48,51 +48,52 @@
             class="h-2 w-full cursor-pointer appearance-none rounded-lg bg-gray-200"
             oninput="updateData(this.value)"
           />
-          <span class="absolute -bottom-6 start-0 text-sm text-gray-500"
+          <!-- 一种让 slider 下标和对应档位对齐的奇技淫巧：
-            >1</span
+            在其下方放置 flex 容器，其中放置 space-between 的若干 label。此时，由于文字宽度的影响，无法真正对齐，产生偏移。
+            考虑将每个 label 实际大小设为 0，这样 label 可以实际对齐；放置其 absolute 的子元素，其中放置实际要显示的文字，
+            该 span 通过指定 left 和 translate 可以实现文字中线和父元素对齐，从而实现文字和 slider 档位对齐，作为 slider 刻度。
+            此外，注意 x 轴 padding 应该设为 slider 上按钮半径大小，因为 slider 实际开始位置不是该元素最左端，而是滑块在最左端时的中心点。
+          -->
+          <div
+            class="-bottom-6 flex w-full flex-nowrap justify-between px-2 text-sm text-gray-500"
           >
-          <span class="absolute -bottom-6 start-[9.0909%] text-sm text-gray-500"
+            <span class="relative">
-            >2</span
+              <span class="absolute left-1/2 -translate-x-1/2">1</span></span
             >
-          <span
+            <span class="relative">
-            class="absolute -bottom-6 start-[18.1818%] text-sm text-gray-500"
+              <span class="absolute left-1/2 -translate-x-1/2">2</span></span
-            >3</span
             >
-          <span
+            <span class="relative">
-            class="absolute -bottom-6 start-[27.2727%] text-sm text-gray-500"
+              <span class="absolute left-1/2 -translate-x-1/2">3</span></span
-            >4</span
             >
-          <span
+            <span class="relative">
-            class="absolute -bottom-6 start-[36.3636%] text-sm text-gray-500"
+              <span class="absolute left-1/2 -translate-x-1/2">4</span></span
-            >5</span
             >
-          <span
+            <span class="relative">
-            class="absolute -bottom-6 start-[45.4545%] text-sm text-gray-500"
+              <span class="absolute left-1/2 -translate-x-1/2">5</span></span
-            >6</span
             >
-          <span
+            <span class="relative">
-            class="absolute -bottom-6 start-[54.5455%] text-sm text-gray-500"
+              <span class="absolute left-1/2 -translate-x-1/2">6</span></span
-            >7</span
             >
-          <span
+            <span class="relative">
-            class="absolute -bottom-6 start-[63.6364%] text-sm text-gray-500"
+              <span class="absolute left-1/2 -translate-x-1/2">7</span></span
-            >8</span
             >
-          <span
+            <span class="relative">
-            class="absolute -bottom-6 start-[72.7273%] text-sm text-gray-500"
+              <span class="absolute left-1/2 -translate-x-1/2">8</span></span
-            >9</span
             >
-          <span
+            <span class="relative">
-            class="absolute -bottom-6 start-[81.8182%] text-sm text-gray-500"
+              <span class="absolute left-1/2 -translate-x-1/2">9</span></span
-            >10</span
             >
-          <span
+            <span class="relative">
-            class="absolute -bottom-6 start-[90.9091%] text-sm text-gray-500"
+              <span class="absolute left-1/2 -translate-x-1/2">10</span></span
-            >11</span
             >
-          <span class="absolute -bottom-6 start-full text-sm text-gray-500"
+            <span class="relative">
-            >12</span
+              <span class="absolute left-1/2 -translate-x-1/2">11</span></span
             >
+            <span class="relative">
+              <span class="absolute left-1/2 -translate-x-1/2">12</span></span
+            >
+          </div>
         </div>
       </div>
     </div>