好的,所以我遇到的问题是使范围的输出响应.
当你运行代码时它当前工作正常,因为值是以像素为单位的位置,但是当你调整视口大小时,它不能正确地与滑块对齐.我想可能使用百分比而不是像素来对齐输出可能会解决问题,但我不确定如何正确实现它.
我试过搞乱它但没有运气,有谁知道我怎么能做到这一点？
HTML：
<form>
<div class="range-control" data-thumbwidth="20">
<input id="inputRange" type="range" min="0" max="100" step="1" value="0">
<div><output name="rangeVal">0</output></div>
</div>
</form>
CSS：
*,*:before,*:after {
-webkit-Box-sizing: border-Box;
-moz-Box-sizing: border-Box;
Box-sizing: border-Box;
}
html {
font-family: Arial,sans-serif;
}
form {
padding-top: 100px;
margin: 0 auto;
}
.range-control {
position: relative;
}
input[type=range] {
display: block;
width: 100%;
margin: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
position: relative;
height: 12px;
border: 1px solid #b2b2b2;
border-radius: 5px;
background-color: #e2e2e2;
Box-shadow: inset 0 1px 2px 0 rgba(0,0.1);
}
input[type=range]::-webkit-slider-thumb {
position: relative;
top: -5px;
width: 20px;
height: 20px;
border: 1px solid #999;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: #fff;
Box-shadow: inset 0 -1px 2px 0 rgba(0,0.25);
border-radius: 100%;
cursor: pointer;
}
output {
position: absolute;
top: 20px;
width: 50px;
height: 24px;
border: 1px solid #e2e2e2;
margin-left: -15px;
background-color: #fff;
border-radius: 3px;
color: #777;
font-size: .8em;
line-height: 24px;
text-align: center;
}
input[type=range]:active + output {
display: block;
}
JQUERY：
$('.range-control').each(function(){
var container = $(this),input = container.find('input'),output = container.find('output'),rangeWidth = input.width(),thumbWidth = container.attr('data-thumbwidth'),startValue = input.val(),startOffset = ((rangeWidth - thumbWidth) / 100) * startValue + '%';
output
.css({
'left' : startOffset
});
$(input).on('input',function(){
var value = this.value,offset = ((rangeWidth - thumbWidth) / 100) * value;
output
.val(value)
.css({
'left' : offset
});
});
});
JSFiddle
任何帮助将非常感激!!!
**编辑**请阅读
所以Mohamed-Yousef在回答这个问题的过程中回答了问题,所以我已经投了票,但是他已经在代码中重复了两次变量(详情请参阅他的回答).我认为有一种更有效的方法(使用更少的代码),所以如果有人有更好的方法这样做,请分享.
解决方法
只需要在窗口调整大小时更新你的变量来改变它的值..并使你的输入事件在每个函数内打印多次,这使得在调整大小后不能读取新变量..所以我把它拿出来并运行每个事件
编辑后
$(document).ready(function(){
var container,input,output,rangeWidth,thumbWidth,startValue,startOffset;
// make a function to update variable
var update_variable = function(){
$('.range-control').each(function(){
container = $(this);
input = container.find('input');
output = container.find('output');
rangeWidth = input.width();
thumbWidth = container.attr('data-thumbwidth');
startValue = input.val();
startOffset = ((rangeWidth - thumbWidth) / 100) * startValue;
output
.css({
'left' : startOffset
});
});
}
// update variable after document ready
update_variable();
// input input event
$('.range-control > input').on('input',function(){
var value = this.value,offset = ((rangeWidth - thumbWidth) / 100) * value;
$(this).closest('.range-control').find('output')
.val(value +'%')
.css({
'left' : offset
});
});
// update variable in window resize
$(window).on('resize',update_variable);
});
DEMO HERE
重要说明：如果您具有相同宽度的输入,此代码将完美运行..如果其宽度不同,则需要使用元素数组来获取每个元素宽度