如何隐藏HTML Range Input滑块(Thumb)并保留刻度标记？

需要制作一个HTML range输入控件，隐藏其滑块（Thumb），但保留下方的离散刻度标记。示例代码如下：

input[type='range'] {
    overflow: hidden;
    width: 120px;
    -webkit-appearance: none;
    background-color: red;
}

input[type='range']::-webkit-slider-runnable-track {
    height: 5px;
    -webkit-appearance: none;
    color: blue;
    margin-top: -1px;
}

input[type='range']::-webkit-slider-thumb {
    width: 0.01px;
    -webkit-appearance: none;
    height: 0.01px;
    cursor: ew-resize;
    background: black;
    box-shadow: -80px 0 0 80px blue;
}

<input
type="range"
min="0"
max="15"
step="0.1"
value=5
class="song-slider"
list="ticks"
/>
<datalist id="ticks">
  <option>0</option>
  <option>1</option>
  <option>3</option>
  <option>6</option>
  <option>10</option>
  <option>15</option>
</datalist>

注释掉CSS中第4行的-webkit-appearance: none，或改为appearance: none时，刻度会重新显示，但滑块也会随之出现。请问如何同时实现隐藏滑块并保留刻度标记？

核心思路是不在主input[type='range']元素上使用-webkit-appearance: none（该属性会破坏浏览器默认的datalist刻度渲染逻辑），转而通过调整滑块的样式彻底隐藏它，同时保留轨道和刻度的正常显示。

修改后的完整代码如下：

input[type='range'] {
    overflow: hidden;
    width: 120px;
    background-color: red;
    /* 移除-webkit-appearance: none，确保datalist刻度正常渲染 */
}

input[type='range']::-webkit-slider-runnable-track {
    height: 5px;
    background-color: blue;
    /* 用background-color替代color，轨道样式更稳定 */
}

input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 0;
    height: 0;
    /* 将滑块尺寸设为0，彻底隐藏 */
    cursor: ew-resize;
    /* 保留拖拽光标，维持交互提示 */
}

/* Firefox 兼容样式 */
input[type='range']::-moz-range-thumb {
    width: 0;
    height: 0;
    border: none;
    cursor: ew-resize;
}

input[type='range']::-moz-range-track {
    height: 5px;
    background-color: blue;
}

<input
type="range"
min="0"
max="15"
step="0.1"
value="5"
class="song-slider"
list="ticks"
/>
<datalist id="ticks">
  <option>0</option>
  <option>1</option>
  <option>3</option>
  <option>6</option>
  <option>10</option>
  <option>15</option>
</datalist>

关键调整说明： #

• 保留浏览器默认刻度渲染：移除主元素的-webkit-appearance: none，让浏览器负责datalist刻度的显示逻辑。
• 彻底隐藏滑块：将滑块的宽高设为0，同时针对webkit和moz内核分别设置样式，确保跨浏览器一致隐藏。
• 优化轨道样式：用标准的background-color替代原代码中的color属性，避免样式兼容性问题。
• 维持交互性：保留拖拽光标，让用户明确控件仍可操作。

内容的提问来源于stack exchange，提问作者lowlyprogrammer