在 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 在項目之間創建相等的空間，但是由於項目本身的寬度不同，例如 'ALL' 比 '1H' 更寬，這些不會與等間距的輸入范圍步長對齊。

為了克服這種絕對性，可以使用從文檔流中刪除項目內容，因此列表項將具有相同的寬度，並且間隔均勻。 這些在周圍的列表標簽上使用 justify-center 居中。

Answer 2

像這樣的東西可以滿足您的需求嗎？

 $(() => { // call setup slider passing in values setupSlider('mySlider4', ["1H", "1D", "1W", "1M", "1Y", "ALL"], 2); }); // setup slider HTML, then call the following method with the values function setupSlider(id, vals, initialVal = 0) { $(`#${id}`).append($('<div>').addClass('step-marks')); $(`#${id}`).append($('<div>').addClass('step-labels')); $(`#${id}`).append($('<input type="range">')); const min = 0; const max = vals.length - 1; // initialise slider vals $(`#${id} input[type=range]`) .attr({ min: min, max: max }) .val(initialVal); vals.forEach((x, i) => { if (i < vals.length - 1) { $(`#${id} .step-marks`).append($("<div>")); } const label = $("<span>").text(x).on('click', () => $(`#${id} input[type=range]`).val(i)); $(`#${id} .step-labels`).append(label); }); const length = vals.length; const multiply = length / (length - 1); const widthVal = `calc(100% * ${multiply} - 25px)`; const marginVal = `calc(${widthVal} / ${length * -2} + 10px)`; $(`#${id} .step-labels`).css("width", widthVal); $(`#${id} .step-labels`).css("margin-left", marginVal); $(`#${id}`).show(); }

 .sliderWithLabels { width:100%; padding: 20px 40px 0; height: 80px; overflow: hidden; display: none; } .sliderWithLabels input[type=range] { position: relative; height: 0.5rem; margin-top: 1.25rem; margin-bottom: 2.25rem; background-color: #e6e6e6; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: none; touch-action: none; top: -49px; position: relative; -webkit-appearance: none; width: 100%; height: 10px; background: #d3d3d3; outline: none; border-radius: 10px; } .sliderWithLabels input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: #4087c7; cursor: pointer; border-radius: 100%; } .sliderWithLabels input[type=range]::-moz-range-thumb { width: 20px; height: 20px; background: #4087c7; cursor: pointer; } .sliderWithLabels > div { display: flex; align-items: stretch; height: 20px; margin-top: -6px; position: relative; width: 100%; } .sliderWithLabels > div > div { color: white; width: 100px; margin: 0px; text-align: center; line-height: 75px; font-size: 30px; flex: 1; border-right: 1px solid #d3d3d3; border-left: 1px solid #d3d3d3; } .sliderWithLabels > div > div:first-of-type { border-left: 2px solid #fff; } .sliderWithLabels > div > div:last-of-type { border-right: 2px solid #fff; } .sliderWithLabels > div > span { color: #444; margin: 0px; text-align: center; line-height: 75px; font-size: 15px; flex: 1; font-family: sans-serif; } .sliderWithLabels > div.step-labels { top: -10px; } .sliderWithLabels > div.step-labels span { cursor: pointer; } .sliderWithLabels > div.step-marks { width: calc(100% - 20px) !important; margin-left: 10px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="width:50%"> <div class="sliderWithLabels" id="mySlider4"></div> </div>