如何将jQuery UI所有选定范围（不仅仅是最小和最大）加载到数组

Question

您能否看一下这个演示，让我知道如何将Min和Max之间的选定范围值加载到一个数组中

selected.push(ui.values);给我选择的最小值和最大值，但是我也需要它们之间的值

$( function() {
var selected =[];
    $( "#slider-range" ).slider({
      range: true,
      min: 133,
      max: 146,
      values: [ 133, 146 ],
      stop: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
        
         $("#dl-sv-input-mmr").val(ui.values[0] + " - " + ui.values[1]);
        selected.push(ui.values);
        console.log(selected)
      },
      
    });
    $( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
      " - $" + $( "#slider-range" ).slider( "values", 1 ) );
  } );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<p>
  <label for="amount">Price range:</label>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>

Answer 1

请用

selected.push(ui.values[0]);

代替

selected.push(ui.values);

Answer 2

您可以添加一个循环来将值从下限推到上限：

$(function() {
  $("#slider-range").slider({
    range: true,
    min: 133,
    max: 146,
    values: [133, 146],
    stop: function(event, ui) {
      var selected = [];
      $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
      $("#dl-sv-input-mmr").val(ui.values[0] + " - " + ui.values[1]);
      for (var i = ui.values[0]; i <= ui.values[1]; i++) {
        selected.push(i);
      }
      console.log(selected);
    },

  });
  $("#amount").val("$" + $("#slider-range").slider("values", 0) +
    " - $" + $("#slider-range").slider("values", 1));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<p>
  <label for="amount">Price range:</label>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>

Answer 3

也可以做一个简单的功能。

$(function() {
  function fillRange(start, end) {
    var arr = [];
    for (var i = start; i <= end; i++) {
      arr.push(i);
    }
    return arr;
  }
  var selected = [];
  $("#slider-range").slider({
    range: true,
    min: 133,
    max: 146,
    values: [133, 146],
    stop: function(event, ui) {
      $("#amount").val("$" + ui.values[0] + " - $" + ui.values[1]);
      $("#dl-sv-input-mmr").val(ui.values[0] + " - " + ui.values[1]);
      selected = fillRange(ui.values[0], ui.values[1]);
      console.log(selected)
    },
  });
  $("#amount").val("$" + $("#slider-range").slider("values", 0) + " - $" + $("#slider-range").slider("values", 1));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<p>
  <label for="amount">Price range:</label>
  <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;">
</p>
<div id="slider-range"></div>

这与包含在函数中的@SLePort答案相同。它没有说明你为什么需要这些数组。如果需要，可以考虑测试一个值是否在两个选定值之间。