我有一个圆形输入处理程序的范围输入。我使用CSS使处理程序看起来像圆形。现在,我正在尝试寻找一种方法来显示在该圆圈内选择的值。但是,即使经过很长时间,我也没有找到任何办法。所以我在这里。有什么办法可以做同样的事情吗?另外我还需要根据所选的值填充处理程序左右两侧的颜色。您能建议我该怎么做吗?任何帮助,将不胜感激。
这是我使用的代码
<input type="range" min="0" max="10"/>
input[type=range]{
-webkit-appearance: none;
}
input[type=range]::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
background: #ddd;
border: none;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid #e95e57;
height: 32px;
width: 32px;
border-radius: 50%;
background: white;
margin-top: -14px;
}
input[type=range]:focus {
outline: none;
}
input[type=range]:focus::-webkit-slider-runnable-track {
background: #ccc;
}
最佳答案
这是涵盖上述两个方面的答案。您也可以在同一页面上有多个范围输入,并且所有输入都将单独工作。
注意:我确实使用了两行 Markai的代码。多亏了他
<div class="range-wrapper">
<input type="range" min="0" max="10" id="myRange"/>
<div class="text">1</div>
</div>
<div class="range-wrapper">
<input type="range" min="0" max="10" id="mySecondRange"/>
<div class="text">1</div>
</div>
$(document).ready(function(){
updateRangeValue($('input[type=range]'));
$('input[type=range]').on('input change',function(){
var input = $(this);
updateRangeValue(input);
});
});
function getRangeGradient(color1,color2,value,maximum){
var gradient = "linear-gradient(to right, ";
var breakPoint = (value/maximum)*100;
var attrValue = gradient + color1 + " 0%, " + color1 + " " + breakPoint + "%, " + color2 + " " + breakPoint + "%, " + color2 + " 100%)";
return attrValue;
}
function updateRangeValue(input){
var selectedColor = "#428bca";
var nonSelectedColor = "#ddd";
var value = input.val();
var maximum = input.attr('max');
var inputWidth = input.width();
var background = getRangeGradient(selectedColor, nonSelectedColor, value, maximum);
var offLeft = Math.floor((value / maximum) * inputWidth - (((value / maximum) * inputWidth - inputWidth/2) / 100) * 24);
var offLeftAbs = value == maximum ? input.offset().left - 15 + offLeft : input.offset().left - 10 + offLeft;
input.next('.text').css({'left': offLeftAbs +'px'});
input.next('.text').html(value);
input.css('background', background);
}
.range-wrapper {
overflow: hidden;
padding: 5px 0px;
}
.range-wrapper > div {
position: relative;
top: -15px;
width: 5px;
}
.range-wrapper > .text {
pointer-events: none;
}
input[type=range]{
-webkit-appearance: none;
background: linear-gradient(to right, #428bca 0%, #428bca 50%, #ddd 50%, #ddd 100%);
}
input[type=range]::-webkit-slider-runnable-track {
width: 300px;
height: 5px;
border: none;
border-radius: 3px;
}
input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 1px solid #e95e57;
height: 32px;
width: 32px;
border-radius: 50%;
background: white;
margin-top: -14px;
cursor: pointer;
}
input[type=range]:focus {
outline: none;
background: linear-gradient(to right, #428bca 0%, #428bca 50%, #ddd 50%, #ddd 100%);
}
这是jsFiddle链接。
希望这可以帮助。