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

我有一个JQuery范围滑块可以工作，但我需要页面响应，所以我不得不做另一个范围滑块到中等视图。当我手动调整窗口大小，窗口进入中等大小视图时，滑块显然不会在大视图中拾取滑块的值。这可能吗

这是我的密码：

<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>

$（函数（）{
$（“.slider-range1”）.slider({
动画：“快”，
范围：对，
分:0,，
最高：500，
值：[0，500]，
创建：函数（事件、用户界面）{
$（“.ui滑块句柄”）.show（）；
$（“.ui滑块句柄”）.css（“背景”，“url”（“assets/images/handler-03.png”）50%50%no repeat”）；
},
幻灯片：功能（事件、用户界面）{
$（“#amount-min1”）.val（ui.values[0]+“€”）；
$（“#amount-max1”）.val（ui.values[1]+“€”）；
$（“.ui滑块句柄”）.show（）；
$（“.ui滑块句柄”）.css（“背景”，“url”（“assets/images/handler-03.png”）50%50%no repeat”）；
}
});
$（“.amount-min1”）.val（$（“#slider-range1”）.slider（“值”，0）+“欧元”）；
$（“.amount-max1”）.val（$（“#slider-range1”）.slider（“值”，1）+“欧元”）；
});

为什么要使用两个不同的滑块？为什么不为中等/普通视图更改1个滑块的大小？此外，您不能重复使用ID

amount-min1

和

amount-max1

都已复制。是。我认为有两个滑块不是一个好主意…我不认为两个滑块有相同的值是可能的。我只是检查一下以防万一。谢谢。但我想知道的是，我是否有机会使用一个类作为选择器同时创建两个滑块，即$（“.slider range”）.slider（{}），以及它是否正常工作。抱歉我的疏忽是的-你可以同时使用两个滑块，通过基于类的css选择器区分这两个滑块。例如，您可能有两个滑块-一个用于普通视图，另一个用于不同的布局。然后，您可以给它们中的每一个设置样式的类。然后可以添加另一个类，比如“active”。您可以将其指定给相应的滑块。这将允许您（a）隐藏当前未使用的，以及（b）针对用于值提取的。类似“.slider-range1.active”的内容：）enhzflep这似乎是一个很好的解决方案，但我无法想象如何根据视图更改活动类。我想这会非常有效地解决我的问题。