在 Tailwind CSS 中自定义输入范围

Posted 2023-03-07

【中文标题】在 Tailwind CSS 中自定义输入范围

【英文标题】：Customize Input Range in Tailwind CSS

【发布时间】：2021-11-12 11:09:51

【问题描述】：

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

这是你可以看到的游乐场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>

【参考方案1】：

我可以使用 Tailwind CSS 做到这一点，您可以查看我的 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>

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

输入： 将 min=1 和 max=6 应用于输入会在输入滑块上创建一个 6 个增量步长的范围，这些步长将均匀分布，而 step=1 将使滑块拇指能够以一步为增量移动。

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

Justify-between 在项目之间创建相等的空间，但是因为项目本身是不同的宽度，E.G. 'ALL' 比 '1H' 宽，这些不会与等间距的输入范围步长对齐。

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

【参考方案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>

【讨论】：

当然也可以根据自己的需要改css