我有一个可以工作的 JQuery Range Slider,但我需要页面具有响应性,所以我不得不对中等视图做另一个范围滑块。当我手动调整窗口大小并且窗口进入中等大小的视图时,滑块显然不会在大视图中拾取滑块的值。这可能吗?
这是我的代码:
<div class="large-12 medium-4 small-12 columns">
<div class="wrapper-range">
<div class="slider-range1" id="slider-range1"></div>
</div>
<div class="values">
<input type="text" id="amount-min1" class="input-value min-value amount-min1" readonly>
<input type="text" id="amount-max1" class="input-value max-value amount-max1" readonly>
</div>
</div>
<div class="medium-4 columns aside-medium">
<div class="wrapper-range">
<div class="slider-range1" id="slider-range1-medium"></div>
</div>
<div class="values">
<input type="text" id="amount-min1" class="input-value min-value amount-min1" readonly>
<input type="text" id="amount-max1" class="input-value max-value amount-max1" readonly>
</div>
</div>
<script>
$(function() {
$( ".slider-range1" ).slider({
animate: "fast",
range: true,
min: 0,
max: 500,
values: [ 0, 500 ],
create: function( event, ui ) {
$(".ui-slider-handle").show();
$(".ui-slider-handle").css("background",'url("assets/images/handler-03.png") 50% 50% no-repeat');
},
slide: function( event, ui ) {
$( "#amount-min1" ).val( ui.values[ 0 ] + "€" );
$( "#amount-max1" ).val( ui.values[ 1 ] + "€" );
$(".ui-slider-handle").show();
$(".ui-slider-handle").css("background",'url("assets/images/handler-03.png") 50% 50% no-repeat');
}
});
$( ".amount-min1" ).val( $( "#slider-range1" ).slider( "values", 0 ) + "€");
$( ".amount-max1" ).val( $( "#slider-range1" ).slider( "values", 1 ) + "€");
});
</script>