Woo*_*low 44
在造型方面,输入范围仍然是一种噩梦般的黑客攻击.也就是说,在主流浏览器上显示刻度线是可能的,只需要一点点润滑脂和特定于浏览器的解决方案.
Internet Explorer/Edge
您似乎意识到,如果添加HTML step属性,Internet Explorer将默认显示刻度.在一个奇怪的事件转折中,Internet Explorer和Edge可以说是风格输入范围最灵活的浏览器.
<input type="range" min="0" max="100" step="25">Chrome/Safari
在Chrome和其他Webkit浏览器(包括Safari)中,您可以使用datalist元素在滑块上提供一组自定义刻度位置.虽然所有主流浏览器都支持此元素,但Firefox(和其他Gecko浏览器)不会显示可见的刻度线.
<input type="range" min="0" max="100" step="25" list="steplist">
<datalist id="steplist">
<option>0</option>
<option>25</option>
<option>50</option>
<option>75</option>
<option>100</option>
</datalist>火狐
在Firefox和其他基于Gecko的浏览器中,我们需要使用一些特定于供应商的CSS来添加刻度线.您必须将其自定义为对您来说最自然的外观.在这个例子中,我使用水平重复渐变来添加看起来像刻度线的"垂直条纹",但您也可以使用背景图像或任何其他您想要的样式.您甚至可以使用一些Javascript来加载来自datalist元素的信息,然后生成适当的渐变并将其应用于元素,以便它自动发生,因此它可以支持自定义任意停止.
input[type="range"]::-moz-range-track {
padding: 0 10px;
background: repeating-linear-gradient(to right,
#ccc,
#ccc 10%,
#000 10%,
#000 11%,
#ccc 11%,
#ccc 20%);
}<input type="range" min="0" max="100" step="25" list="steplist">
<datalist id="steplist">
<option>0</option>
<option>25</option>
<option>50</option>
<option>75</option>
<option>100</option>
</datalist>兼容性说明:正如评论中所指出的,某些浏览器不支持 datalist .根据这些浏览器处理不支持/无法识别的元素的方式,这可能会导致浏览器在范围输入下显示选项值作为纯文本.如果针对最广泛的浏览器定位对您来说很重要,这可能是个问题.
一种解决方案是repeating-linear-gradient除了gecko浏览器之外还使用webkit浏览器的笨拙kludge,然后完全删除datalist.
另一种解决方案是使用CSS显式设置datalist display: none.此解决方案可能是最优选的,因为您不会牺牲功能来提供传统支持.
vsy*_*ync 18
我开发了自己的轻量级组件，它仅使用 CSS 和linear-gradient background属性，通过使用 CSS 变量（又名“自定义属性”）来渲染刻度。
不幸的是，需要一个包装器元素，但这是我想出的允许结果的最小 HTML 修改。
不幸的是，还需要在范围输入style的属性和托管变量的包装元素的属性之间进行手动同步。
body {
height: 100vh;
display: grid;
place-items: center;
}
.range {
--ticksThickness: 2px;
--ticksHeight: 30%;
--ticksColor: silver;
display: inline-block;
background: silver;
background: linear-gradient(to right, var(--ticksColor) var(--ticksThickness), transparent 1px) repeat-x;
background-size: calc(100%/((var(--max) - var(--min)) / var(--step)) - .1%) var(--ticksHeight);
background-position: 0 bottom;
position: relative;
}
/* min / max labels at the edges */
.range::before, .range::after {
font: 12px monospace;
content: counter(x);
position: absolute;
bottom: -2ch;
}
.range::before {
counter-reset: x var(--min);
transform: translateX(-50%);
}
.range::after {
counter-reset: x var(--max);
right: 0;
transform: translateX(50%);
}
.range > input {
width: 300px;
margin: 0 -6px; /* Critical adjustment */
}<div class="range" style="--step:10; --min:20; --max:100">
<input type="range" min="20" max="100" step="10" value="30">
</div>小智 7
我希望，这将有助于在 FF 下格式化刻度和数据列表的人。要求选项均匀分布，并且 input + datalist 必须具有相同的宽度。
input[type="range"] {
width: 100%;
margin: 0;
box-sizing: border-box;
}
datalist {
display: flex;
width: 100%;
justify-content: space-between;
margin-top: -23px;
padding-top: 0px;
}
option {
width: 2ex;
display: flex;
justify-content: center;
height: 42px;
align-items: end;
background-image: url(tick.png);
height: 4ex;
background-position-y: -15px;
background-position-x: center;
z-index: -1;
}
如果需要自定义刻度线，请将滑块与自定义值的弹性盒配对。对齐滑块的宽度以匹配终端刻度的偏移。
注意：此示例仅演示静态视觉效果。需要 JavaScript 将滑块百分比转换为自定义值，并突出显示所选刻度。
:root {
font-family: system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif;
}
h1 {
font-size: 1.1em;
text-transform: uppercase;
color: darkgray;
letter-spacing: .2em;
}
.options {
width: 30em;
border: 1px solid silver;
border-radius: 1em;
background-color: ghostwhite;
padding: 0 0 1em 0;
text-align: center;
display: flex;
flex-direction: column;
}
.ticks {
display: flex;
}
.o_txt {
flex: 1;
}
.slider {
width: 87%; /* manually adjust this to look right */
margin: auto;
cursor: grab;
}
.o_on {
font-weight: 500;
color: blue;
}<div class="options">
<h1>Budget</h1>
<input class="slider" type="range" min="0" max="100" step="10" list="steplist" value="40" />
<datalist id="steplist">
<option>0</option>
<option>10</option>
<option>20</option>
<option>30</option>
<option>40</option>
<option>50</option>
<option>60</option>
<option>70</option>
<option>80</option>
<option>90</option>
<option>100</option>
</datalist>
<div class="ticks">
<span class="o_txt">$100</span>
<span class="o_txt">$1K</span>
<span class="o_txt o_on">$10K</span>
<span class="o_txt">$100K</span>
<span class="o_txt">$1M</span>
<span class="o_txt">$10M</span>
</div>
</div>您可以<datalist>在范围内使用：
<input type="range" min="0" value="0" max="10" step="1" list="ticks">
<datalist id="ticks">
<option>0</option>
<option>2</option>
<option>4</option>
<option>6</option>
<option>8</option>
<option>10</option>
</datalist>小智 5
受user10452457 的回答的启发，我创建了一种方法来纠正datalist元素的间距，尤其是当 datalist 条目的长度变化时。缺点是您必须在其style属性中指定数据列表的长度：<datalist style="--list-length: XYZ;">...</datalist>。如果在创建数据列表时长度未知，您可以使用一些 javascript 更改此值。
这种方法的工作原理是分割范围输入的宽度，使数据列表条目的文本在范围缩略图下方居中。第一个/最后一个数据列表条目与左/右对齐。该方法要求width的范围内输入的是100%与margin-left要0。
当使用 Firefox 的默认拇指宽度为12px.
/* style range */
input[type=range] {
width: 100%;
max-width: 100%;
margin-left: 0;
}
/* style datalist */
input[type=range] + datalist {
display: block;
margin-top: -4px;
}
input[type=range] + datalist option {
display: inline-block;
width: calc((100% - 12px) / (var(--list-length) - 1));
text-align: center;
}
input[type=range] + datalist option:first-child {
width: calc((100% - 12px) / ((var(--list-length) - 1) * 2) + 6px);
text-align: left;
}
input[type=range] + datalist option:last-child {
width: calc((100% - 12px) / ((var(--list-length) - 1) * 2) + 6px);
text-align: right;
}<input type="range" min="1" max="9" id="my-range" list="my-datalist"/>
<datalist id="my-datalist" style="--list-length: 9;"><!--
---><option>1</option><!--
---><option>2</option><!--
---><option>3</option><!--
---><option>A</option><!--
---><option>B</option><!--
---><option>C</option><!--
---><option>Four</option><!--
---><option>Five</option><!--
---><option>Six</option><!--
---></datalist>当您想为范围输入使用自定义样式时，您可以使用以下样式。该--thumb-width变量保存拇指的大小并用于正确计算。
// change thumb-width variable on input change
var tw = document.getElementById('thumb-width');
var mr = document.getElementById('my-range');
var ml = document.getElementById('my-datalist');
tw.onchange = () => {
mr.style.setProperty('--thumb-width', tw.value + 'px');
ml.style.setProperty('--thumb-width', tw.value + 'px');
}/* set thumb width */
input[type=range], input[type=range] + datalist { --thumb-width: 8px; }
/* style range */
input[type=range] {
-webkit-appearance: none; /* hide track and thumb */
width: 100%;
max-width: 100%;
margin-left: 0;
}
/* style datalist */
input[type=range] + datalist {
display: block;
margin-top: -4px;
}
input[type=range] + datalist option {
display: inline-block;
width: calc((100% - var(--thumb-width)) / (var(--list-length) - 1));
text-align: center;
}
input[type=range] + datalist option:first-child {
width: calc((100% - var(--thumb-width)) / ((var(--list-length) - 1) * 2) + var(--thumb-width) / 2);
text-align: left;
}
input[type=range] + datalist option:last-child {
width: calc((100% - var(--thumb-width)) / ((var(--list-length) - 1) * 2) + var(--thumb-width) / 2);
text-align: right;
}
/* style Firefox range and thumb */
input[type=range]::-moz-range-track {
background: #eee;
cursor: pointer;
height: 2px;
border: 1px solid #888;
border-radius: 1px;
}
input[type=range]::-moz-range-thumb {
background: #eee;
box-sizing: border-box;
width: var(--thumb-width);
height: 20px;
cursor: pointer;
border: 1px solid #888;
border-radius: 3px;
}
/* style Chrome range and thumb */
input[type=range]::-webkit-slider-runnable-track {
background: #eee;
cursor: pointer;
height: 2px;
border: 1px solid #888;
border-radius: 1px;
}
input[type=range]::-webkit-slider-thumb {
background: #eee;
box-sizing: border-box;
width: var(--thumb-width);
height: 20px;
cursor: pointer;
border: 1px solid #888;
}<label>Thumb width:</label>
<input type="number" id="thumb-width" min="4" max="60" step="4" value="10"/>
<br><br>
<input type="range" min="1" max="9" id="my-range" list="my-datalist"/>
<datalist id="my-datalist" style="--list-length: 9;"><!--
---><option>1</option><!--
---><option>2</option><!--
---><option>3</option><!--
---><option>A</option><!--
---><option>B</option><!--
---><option>C</option><!--
---><option>Four</option><!--
---><option>Five</option><!--
---><option>Six</option><!--
---></datalist>