在 Tailwind CSS 中自定义输入范围

Question

如何将标签放在顺风输入范围下方，如下图所示。

这是游乐场，您可以点击此处查看

<div class="flex justify-center min-h-screen bg-black p-12">
  <input type="range" class="appearance-none w-full h-0.5 bg-grey rounded outline-none slider-thumb" />
</div>

Answer 1

我能够使用 Tailwind CSS 做到这一点，你可以在这里查看我的游乐场

<div class="flex flex-col space-y-2 p-2 w-80">
    <input type="range" class="w-full" min="1" max="6" step="1" />
    <ul class="flex justify-between w-full px-[10px]">
        <li class="flex justify-center relative"><span class="absolute">1H</span></li>
        <li class="flex justify-center relative"><span class="absolute">1D</span></li>
        <li class="flex justify-center relative"><span class="absolute">1W</span></li>
        <li class="flex justify-center relative"><span class="absolute">1M</span></li>
        <li class="flex justify-center relative"><span class="absolute">1Y</span></li>
        <li class="flex justify-center relative"><span class="absolute">ALL</span></li>
    </ul>
</div>

外部div： 外部div使用flex-col来对齐列中的输入和无序列表项，并且两者都设置为w-full，以便它们填充外部div。

输入：将 min=1 和 max=6 应用于输入会在输入滑块上创建一系列 6 个增量步骤，这些步骤将均匀间隔，并且 step=1 将使滑块滑块能够以一步增量移动。

无序列表：填充 px-[10px]（拇指滑块宽度的一半，应用于每一侧）无序列表将包含从第一个输入范围步骤的中心到最后一个输入的中心的无序列表范围步骤，因为滑块拇指中心没有到达侧边的末端，而是停在圆周上。

Justify- Between 在项目之间创建相等的空间，但是因为项目本身的宽度不同，EG“ALL”比“1H”宽，这些不会与等间距的输入范围步骤对齐。

为了克服这个绝对问题，可以使用从文档流中删除项目内容，因此列表项目都将具有相同的宽度，并且间隔均匀。这些使用 justify-center 在周围的列表标签上居中。