javascript - 输入范围在水平线上制作小的垂直线

Question

我有输入范围，我想为每个默认步骤的每条线在水平线上制作小的垂直线。

我的范围从 0 到 40 我需要 10、20、30 上的小垂直线请不要使用 jQuery 或外部库，因为我使用的框架不允许它。

<input id="myRange" step="10" name="foo"  type="range" min="0" max="40" value="{!v.resourseHours}" class="slider" onchange="{!c.resourseInput}" />

类似于每行底部和顶部的图像我想要数字 10,20,30

Answer 1

您想使用某种类型的覆盖/底层来实现该效果。

.slider-wrapper {
  position: relative;
  width: 150px;
}

.slider {
  width: 150px;
  margin: 0;
  padding: 0;
}

.underlay {
  position: absolute;
  height: 10px;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  display: flex;
}

.breakpoint {
  width: Calc(100%/4);
}

.breakpoint:not(:first-child) {
  border-left: 1px solid green;
}

<div class="slider-wrapper">
  <div class="underlay">
    <div class="breakpoint"></div>
    <div class="breakpoint"></div>
    <div class="breakpoint"></div>
    <div class="breakpoint"></div>
  </div>
  <input id="myRange" step="1" name="foo" type="range" min="0" max="40" class="slider" />
</div>

Answer 2

使用列表属性引用数据列表。每个选项都显示一个标记。

<input type="range" list="markers" max="10" step="2">
<datalist id="markers">
  <option value="0"></option>
  <option value="2"></option>
  <option value="4"></option>
  <option value="6"></option>
  <option value="8"></option>
  <option value="10"></option>
</datalist>