输入范围使水平线上的小垂直线
input range make small vertical lines in on the horizontal line
我有输入范围,我想在每个默认步长的每一行的水平线上制作小垂直线。
我的范围从 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
您想使用某种类型的 overlay/underlay 来实现该效果。
.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>
使用列表属性引用数据列表。每个选项显示一个标记。
<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>
我有输入范围,我想在每个默认步长的每一行的水平线上制作小垂直线。
我的范围从 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
您想使用某种类型的 overlay/underlay 来实现该效果。
.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>
使用列表属性引用数据列表。每个选项显示一个标记。
<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>