我正在使用 jQuery ui 滑块来更改 div 的宽度。我已经设置了滑块并且可以正常工作，以便用户移动滑块时 css 会发生变化。
我还设置了我的滑块，使其手柄位置默认为输入值。
我想要实现的是在页面加载时，使 css 宽度与滑块处理位置创建的值相匹配。
HTML
<div class="inputWrap hidden">
<input class="inputNumber" type="text" value="5">
<div class="slider"></div>
</div>
<div class="boxout">
<div class="box"></div>
</div>
CSS
.boxout {
width: 200px;
height: 200px;
}
.box {
width: 10%;
height: 10%;
background: black;
}
查询
$(".slider").slider({
min: 0,
max: 10,
slide: function (event, ui) {
$(".box").css('width',(10+(ui.value*2)) + '%');
$(this).parent().find(".inputNumber").val(ui.value);
},
create: function(event, ui){
$(this).slider('value',$(this).parent().find(".inputNumber").val());
}
});
JSFIDDLE
您可以调用滑块的slide事件，传入当前值：
var slider = $('.slider');
slider.slider('option', 'slide')
.call(slider, null, { value : $('.slider.slider('value') });
更新小提琴：http : //jsfiddle.net/yLanxgrs/2/
或者，将幻灯片事件的内容移动到新函数并在那里进行更新。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句