javascript - 使用 javascript/jquery 通过滑块传递数据

Question

我有一个可以工作的 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>