随着值更改，显示范围输入的处理程序上的所选值 [英] Showing the selected value on the handler of range input as the value changes
问题描述
我有一个具有圆形处理程序的范围输入。我使用css使处理程序看起来像圆。现在，我试图找到一种方式来显示在该圈内选择的值。但我没有找到任何办法这样做，即使很长时间。所以这里我是。有什么办法做同样的事情吗？还有一件事我需要根据选择的值填充处理程序的左侧和右侧的颜色。你能请我建议我该怎么办吗？
I have a range input which is having circle shaped handler. I used css to make the handler look like circle. Now that Im trying to find a way to show the value selected inside that circle. But I didn't find any way to do that even after long time. So here I am. Is there any way to do the same ? and one more thing I need to fill the colors on the left and right side of the handler based on the value selected. Can you please suggest how do i do it ? Any help would be appreciated.
以下是我使用的代码
<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;
}
推荐答案
两个方面提到。您也可以在同一页面上使用多个范围输入，并且所有输入都将单独工作。
Here is an answer that covers both aspects mentioned. You can also have multiple range inputs on the same page and all will work individually.
注意：我使用了几行 Markai 代码。感谢他。
Note: I did use a couple of lines of Markai's code. Thanks to him.
-
HTML
HTML
<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>
jQuery
$(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);
}
CSS
CSS
.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%);
}
Here is the jsFiddle link.
a href =http://jsfiddle.net/2ndr0bja/3/ =nofollow> jsFiddle 链接。
Hope this helps.
这篇关于随着值更改，显示范围输入的处理程序上的所选值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
