Какой плагин можно использовать для редактирования диапазона чисел?

Question

[DeniSidorenko]

Нужен плагин для такого функционала. Проблема в том, что требуется чтобы значения менялись когда двигаешь ползунок + когда меняешь само значения в ячейках.

Comments

[alex]

Проблема в том

какая проблема? в чем проблема? проблема в том что вы не умете гуглить? тогда да, это проблема.

Answer 1

[Юпитер Макс]

тут

Comments

[DeniSidorenko]

Посмотрел, разве там можно писать свои значения?

[Виталий Першин]

DeniSidorenko,

min: 0, // Минимальное допустимое значение
max: 500, // Максимальное допустимое значение
values: [ 75, 300 ], // Значение по умолчанию

[alex]

Виталий, автору нужно совсем-совсем готовое решение, вместе с инпутами и т.д. просто видимо он один из представителей жыквери-программистов, которые ломаются, когда им требуется реализовать функционал, который не может предоставить ни один найденный ими плагин из коробки

[DeniSidorenko]

Верно

[Юпитер Макс]

DeniSidorenko, пишите все что угодно. На большинстве сайтов именно этот слайдер и используют.

Answer 2

[0xD34F]

ionRangeSlider, например:

<input id="min" type="number" value="25"> -
<input id="max" type="number" value="75">

<div id="range"></div>

const values = {
  min: 0,
  max: 100,
};

const range = $('#range').ionRangeSlider({
  type: 'double',
  grid: true,
  ...values,
  onChange(e) {
    $('#min').val(e.from);
    $('#max').val(e.to);
  },
}).data('ionRangeSlider');

$('#min, #max').attr(values).on('input', function() {
  const v = [ $('#min').val(), $('#max').val() ]
    .sort((a, b) => a - b)
    .map(n => Math.max(values.min, Math.min(values.max, +n)));

  $('#min').val(v[0]);
  $('#max').val(v[1]);

  range.update({
    from: v[0],
    to: v[1],
  });
}).trigger('input');

jquery-ui slider тоже подойдёт:

<input id="min" type="number" value="25"> -
<input id="max" type="number" value="75">

<div id="range"></div>

const values = {
  min: 0,
  max: 100,
};

$('#range').slider({
  range: true,
  ...values,
  slide(e, ui) {
    $('#min').val(ui.values[0]);
    $('#max').val(ui.values[1]);
  },
});

$('#min, #max').attr(values).on('input', function() {
  const v = [ $('#min').val(), $('#max').val() ]
    .sort((a, b) => a - b)
    .map(n => Math.max(values.min, Math.min(values.max, +n)));

  $('#min').val(v[0]);
  $('#max').val(v[1]);

  $('#range').slider('values', v);
}).trigger('input');

Comments

[DeniSidorenko]

Спасибо большое, самое интересное что не думал что ionRangeSlider имеет такую возможность