HTML 范围输入中的样式设置步骤

Question

我创建了一个简单的范围滑块。现在我想把步骤风格化，做一个小圆圈。我也想让他们给外部赋值，如下图。如你所见，我有很多类型的滑块...求救。

<input id="inp1" type="range" min="0" max="10" step="2" value="0">

这是我的滑块

但我想要这个

这是我的 HTML

<input id="inp1" type="range" min="0" max="10" step="2" value="0">

CSS：

input[type=range]::-webkit-slider-runnable-track { 
    width: 300px;
    height: 3px;
    background: #bfbfbf;
    border: none;
    border-radius: 2px;
} 

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #74B643;
    margin-top: -6px; 
} 

input[type=range]:focus {
    outline: none; 
} 

input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
} 

Answer 1

document.querySelectorAll(".__range-step").forEach(function(ctrl) {
	var el = ctrl.querySelector('input');        
	var output = ctrl.querySelector('output'); 
	var newPoint, newPlace, offset;
	el.oninput =function(){ 
		// colorize step options
		ctrl.querySelectorAll("option").forEach(function(opt) {
			if(opt.value<=el.valueAsNumber)                
				opt.style.backgroundColor = 'green';
			else
				opt.style.backgroundColor = '#aaa';
		});           
		// colorize before and after
		var valPercent = (el.valueAsNumber  - parseInt(el.min)) / (parseInt(el.max) - parseInt(el.min));            
		var style = 'background-image: -webkit-gradient(linear, 0% 0%, 100% 0%, color-stop('+
		valPercent+', green), color-stop('+
		valPercent+', #aaa));';
		el.style = style;

		// Popup
    if((' ' + ctrl.className + ' ').indexOf(' ' + '__range-step-popup' + ' ') > -1)
    {
			var selectedOpt=ctrl.querySelector('option[value="'+el.value+'"]');
			output.innerText= selectedOpt.text;
			output.style.left = "50%"; 
			output.style.left = ((selectedOpt.offsetLeft + selectedOpt.offsetWidth/2) - output.offsetWidth/2) + 'px'; 
    }           
	};
	el.oninput();    
});

window.onresize = function(){
	document.querySelectorAll(".__range").forEach(function(ctrl) {
		var el = ctrl.querySelector('input');    
		el.oninput();    
	});
};

.__range input
{
  outline: none;
	-webkit-appearance: none;
	background-color: #aaa;
	height: 3px;
	width: 100%;
	margin: 10px auto;
}
.__range input::-webkit-slider-thumb
{
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	background-color: green;
	border-radius: 50%;
	cursor: -moz-grab;
	cursor: -webkit-grab; 
}            
.__range input::-moz-range-thumb
{
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	background-color: green;
	border-radius: 50%;
	cursor: -moz-grab;
	cursor: -webkit-grab; 
}
.__range input::-ms-thumb
{
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	background-color: green;
	border-radius: 50%;
	cursor: -moz-grab;
	cursor: -webkit-grab; 
}
.__range-step{
	position: relative;                
}

.__range-max{
	float: right;
}
.__range-step input::-webkit-slider-thumb
{
	background: transparent;
}            
.__range-step input::-moz-range-thumb
{
	background: transparent;
}
.__range-step input::-ms-thumb
{
	background: transparent;
}
.__range-step datalist {
	position:relative;
	display: flex;
	justify-content: space-between;
	height: auto;
	bottom: 16px;
	/* disable text selection */
	-webkit-user-select: none; /* Safari */        
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* IE10+/Edge */                
	user-select: none; /* Standard */
	/* disable click events */
	pointer-events:none;  
}
.__range-step datalist option {
	width: 10px;
	height: 10px;
	min-height: 10px;
	border-radius: 100px;
	/* hide text */
	white-space: nowrap;       
  padding:0;
  line-height: 40px;
}


 .__range-step-popup output 
{ 
	position: absolute;
	background-color: green;                
	width: 30px;
	height: 30px; 
	text-align: center; 
	color: white; 
	border-radius: 100px; 
	display: inline-block; 
	font-size:12px;
	bottom: 100%;
	left: 0;
	vertical-align: middle;
	line-height: 30px;
}
.__range-step-popup .__range-output-square{
	padding: 0 5px; 
	min-width: 25px;
	width: auto !important;                
	border-radius: 5px !important;
}
.__range-step-popup output:after 
{ 
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-top: 10px solid green;
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	top: 90%;
	left: 50%;
	margin-left: -10px;
	margin-top: -1px;
}
.__range-step-popup datalist{
  overflow:hidden;
}
.__range-step{
  margin:0 40px;
}
.__range-step-popup{
  margin:40px 40px;
}

<div class="__range __range-step">
        <input value="3" type="range" max="5" min="1" step="1" list="ticks1">
        <datalist id="ticks1">
          <option value="1">Now</option>
          <option value="2">1 mth</option>
          <option value="3">2 mth</option>
          <option value="4">3 mth</option>
          <option value="5">4+ mth</option>
        </datalist>
</div>


<div class="__range __range-step __range-step-popup">
        <input value="30" type="range" max="50" min="10" step="10" list="ticks2">
        <datalist id="ticks2">
          <option value="10">10</option>
          <option value="20">20</option>
          <option value="30">30</option>
          <option value="40">40</option>
          <option value="50">50</option>
        </datalist>
        <output ></output>
</div>

<div class="__range __range-step __range-step-popup">
        <input value="1" type="range" max="4" min="1" step="1" list="ticks2">
        <datalist id="ticks2">
          <option value="1">Very bad</option>
          <option value="2">Bad</option>
          <option value="3">Good</option>
          <option value="4">Excellent</option>  
        </datalist>
        <output class="__range-output-square"></output>
</div>