skywt
/
WaterHeatmap
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Fix the scale under the slider

This commit is contained in:
SkyWT 2023-12-09 00:03:03 +08:00
parent 4c73f464f5
commit c609ba61ee
1 changed files with 45 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
index.html
View File

@ -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"
>1</span
>
<span class="absolute -bottom-6 start-[9.0909%] text-sm text-gray-500"
>2</span
>
<span
class="absolute -bottom-6 start-[18.1818%] text-sm text-gray-500"
>3</span
>
<span
class="absolute -bottom-6 start-[27.2727%] text-sm text-gray-500"
>4</span
>
<span
class="absolute -bottom-6 start-[36.3636%] text-sm text-gray-500"
>5</span
>
<span
class="absolute -bottom-6 start-[45.4545%] text-sm text-gray-500"
>6</span
>
<span
class="absolute -bottom-6 start-[54.5455%] text-sm text-gray-500"
>7</span
>
<span
class="absolute -bottom-6 start-[63.6364%] text-sm text-gray-500"
>8</span
>
<span
class="absolute -bottom-6 start-[72.7273%] text-sm text-gray-500"
>9</span
>
<span
class="absolute -bottom-6 start-[81.8182%] text-sm text-gray-500"
>10</span
>
<span
class="absolute -bottom-6 start-[90.9091%] text-sm text-gray-500"
>11</span
>
<span class="absolute -bottom-6 start-full text-sm text-gray-500"
>12</span
<!-- 一种让 slider 下标和对应档位对齐的奇技淫巧：
在其下方放置 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="relative">
<span class="absolute left-1/2 -translate-x-1/2">1</span></span
>
<span class="relative">
<span class="absolute left-1/2 -translate-x-1/2">2</span></span
>
<span class="relative">
<span class="absolute left-1/2 -translate-x-1/2">3</span></span
>
<span class="relative">
<span class="absolute left-1/2 -translate-x-1/2">4</span></span
>
<span class="relative">
<span class="absolute left-1/2 -translate-x-1/2">5</span></span
>
<span class="relative">
<span class="absolute left-1/2 -translate-x-1/2">6</span></span
>
<span class="relative">
<span class="absolute left-1/2 -translate-x-1/2">7</span></span
>
<span class="relative">
<span class="absolute left-1/2 -translate-x-1/2">8</span></span
>
<span class="relative">
<span class="absolute left-1/2 -translate-x-1/2">9</span></span
>
<span class="relative">
<span class="absolute left-1/2 -translate-x-1/2">10</span></span
>
<span class="relative">
<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>