Customize Input Range in Tailwind CSS

How do I put the labels below the input range on tailwind just like in the picture below.

Here's the playground which you can see CLICK HERE

<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>

I was able to do this with Tailwind CSS, you can check out my playground here

<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>

Outer Div: The outer div uses flex-col to align the input and the unordered list items in a column, and both are set to w-full so they fill the outer div.

Input: Applying min=1 & max=6 to the input creates a range of 6 incremental steps on the input slider which will be evenly spaced, and step=1 will enable the slider thumb to move at one step increments.

Unordered List: Padding px-[10px] (half the width of the thumb slider, applied to each side) the unordered list will contain the unordered list to span from the center of the first input range step, to the center of the last input range step, as the slider thumb center does not reach the end of the sider but stops on the circumference.

Justify-between creates equal space between the items, however because the items themselves are different widths, E.G. 'ALL' is wider than '1H' these will not line up with the equally spaced input range steps.

To overcome this absolute can be used to remove the item content from the flow of the document, therefore the list items will all have the same width, and be spaced evenly. These are centered using justify-center on the surrounding list tags.