@DeniSidorenko

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

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

OkXYS.jpg
  • Вопрос задан
  • 99 просмотров
Решения вопроса 2
@vardoLP
Ват ю сэй эбаут май мама?!
0xD34F
@0xD34F Куратор тега JavaScript
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');
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы