范围滑块 - 如何在轨道上添加垂直线？

Question

我正在尝试在范围滑块的轨道上添加垂直的相交线。

我使用 CSS (repeating-linear-gradient) 来创建垂直线，但当然，它们不会与“步骤”或拇指移动到的任何位置对齐。步长当前设置为“10”。

此外，如果这是响应式的，那就太好了。

非常感谢您的帮助！这是我的代码：

.slider-container {
  padding: 50px 0;
  background-image: repeating-linear-gradient( to right, #fff, #fff 3%, #ccc 3%, #ccc 6%);
  background-position: center;
}

.slider {
  width: 100%;
}

<div class="slider-container">
  <input type="range" min="-50" max="50" step="10" value="0" class="slider">
</div>

Answer 1

这是我针对类似项目的解决方案。您将需要一些 JS 来计算 HTML 和 CSS 中的百分比。您可以使用图像或其他东西来标记刻度。

https://jsfiddle.net/jennifergoncalves/qknygt8v/34/

/* Sliders */
.slider-container {
	margin: 0;
	padding: 0;
	width: 100%;
}
.slider-container .slider {
	-webkit-appearance: none;
	appearance: none;
	background: #eee;
	height: 25px;
	margin: 0;
	outline: none;
	padding: 0;
	width: 100%;
}

/* Sliders - IE */
.slider-container input[type=range]::-ms-track {
	background: #eee;
	border-color: transparent;
	border-width: 6px 0;
	color: transparent;
	height: 25px;
	width: 100%;
}
.slider-container input[type=range]::-ms-fill-lower {
	background: #eee;
}

/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ 
.slider-container .slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	background: red;
	cursor: pointer;
	height: 25px;
	width: 25%; /* use JS to calculate */
}
.slider-container .slider::-moz-range-thumb {
	background: red;
	cursor: pointer;
	height: 25px;
	width: 25%; /* use JS to calculate */
}
.slider-container  input[type=range]::-ms-thumb {
	background: red;
	cursor: pointer;
	height: 25px;
	width: 40px; /* Set a specific slider handle width, cannot use percents */
}
/* Sliders - thumbs */
.slider-container .slider.slider-option1::-webkit-slider-thumb {
	width: 100%;
}
.slider-container .slider.slider-option1::-moz-range-thumb {
	width: 100%;
}
.slider-container .slider.slider-option2::-webkit-slider-thumb {
	width: 50%;
}
.slider-container .slider.slider-option2::-moz-range-thumb {
	width: 50%;
}
.slider-container .slider.slider-option3::-webkit-slider-thumb {
	width: 33.3%;
}
.slider-container .slider.slider-option3::-moz-range-thumb {
	width: 33.3%;
}
.slider-container .slider.slider-option4::-webkit-slider-thumb {
	width: 25%;
}
.slider-container .slider.slider-option4::-moz-range-thumb {
	width: 25%;
}
.slider-container .slider.slider-option5::-webkit-slider-thumb {
	width: 20%;
}
.slider-container .slider.slider-option5::-moz-range-thumb {
	width: 20%;
}
.slider-container .slider.slider-option6::-webkit-slider-thumb {
	width: 16.6%;
}
.slider-container .slider.slider-option6::-moz-range-thumb {
	width: 16.6%;
}
.slider-container .slider.slider-option7::-webkit-slider-thumb {
	width: 14.2%;
}
.slider-container .slider.slider-option7::-moz-range-thumb {
	width: 14.2%;
}
.slider-container .slider.slider-option8::-webkit-slider-thumb {
	width: 12.5%;
}
.slider-container .slider.slider-option8::-moz-range-thumb {
	width: 12.5%;
}
.slider-container .slider.slider-option9::-webkit-slider-thumb {
	width: 11.1%;
}
.slider-container .slider.slider-option9::-moz-range-thumb {
	width: 11.1%;
}
.slider-container .slider.slider-option10::-webkit-slider-thumb {
	width: 10%;
}
.slider-container .slider.slider-option10::-moz-range-thumb {
	width: 10%;
}

/* Sliders - ticks */
.slider-container ul.slider-ticks {
	list-style: none;
	margin: 0;
	padding: 0;
}
.slider-container ul.slider-ticks {
	height: 10px;
	position: relative;
	top: -5px;
}
.slider-container ul.slider-ticks li {
	color: #aaa;
	display: inline-block;
	font-size: 10px;
	line-height: 10px;
	margin: 0;
	padding: 0;
	text-align: center;
	vertical-align: top;	
}

<div class="slider-container"><input type="range" min="1" max="4" value="3" class="slider gh-slider-option4" id="test">
  <ul class="slider-ticks"><li style="width: 25%">l</li><li style="width: 25%">l</li><li style="width: 25%">l</li><li style="width: 25%">l</li></ul>
</div>