Ползунок диапазона - Как добавить вертикальные линии на дорожке?

Question

Я пытаюсь добавить вертикальные пересекающиеся линии на дорожке ползунка диапазона.

Я использую CSS (повторение-линейный градиент) для создания вертикальных линий, но, конечно, онине выровнен по «шагу» или куда бы ни двигался большой палец.Шаг в настоящее время установлен на «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>