Как загрузить весь массив JQuery UI (не только Min и Max) в массив - PullRequest
Новая
       33

Как загрузить весь массив JQuery UI (не только Min и Max) в массив

0 голосов
/ 06 сентября 2018

Можете ли вы взглянуть на эту демонстрацию и сообщить мне, как я могу загрузить выбранные значения диапазона между 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>

Ответы [ 3 ]

0 голосов
/ 06 сентября 2018

Пожалуйста, используйте 

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

вместо 

selected.push(ui.values);
0 голосов
/ 07 сентября 2018

Может сделать легкую функцию тоже. 

$(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, только что завернутый в функцию.Не указано, зачем вам это нужно в массиве.Может подумать, что если вам нужно, можете просто проверить, что значение находится между двумя выбранными значениями.

0 голосов
/ 06 сентября 2018

Вы можете просто добавить цикл для перемещения значений из нижней границы в верхнюю: 

$(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>
...