Integration: Ion.RangeSlider + DataTables.net

I am trying an integration between DataTables and Ion.RangeSlider, but it is not working. My data is not being filtered when I am using the slider, it works only when I use the inputs.

Here is where I am using: http://myoption.com.br/ Just click on the gear on top right. There you can see the range slider. It should work on the column [6] called Strike.

Looking to the HTML and JS, do you guys know what am I missing?

<tr>
  <td><input type="text" size="5" class="js-input-from" id="min" name="min" value="0" /></td>
  <td class="col-8"><input type="text" class="js-range-slider" value="" /></td>
  <td><input type="text" size="5" class="js-input-to" id="max" name="max" value="0" /></td>
</tr>

$(function () {
  "use strict";
  
  /* Data Table Range Filtering */
  $.fn.dataTable.ext.search.push(
    function (settings, data, dataIndex) {
      var min = parseInt($('#min').val(), 10);
      var max = parseInt($('#max').val(), 10);
      var strike = parseFloat(data[6]) || 0; // use data to column number
      
      if ((isNaN(min) && isNaN(max)) ||
      (isNaN(min) && strike <= max) ||
      (min <= strike && isNaN(max)) ||
      (min <= strike && strike <= max)) {
        return true;
      }
        return false;
    }
  );
  
  // Ion Range Slider
  var $range = $(".js-range-slider"),
  $inputFrom = $(".js-input-from"),
  $inputTo = $(".js-input-to"),
  instance,
  min = 0,
  max = 100,
  from = 0,
  to = 0;
  
  $range.ionRangeSlider({
    type: "double", min: min, max: max,
    onStart: updateInputs,
    onChange: updateInputs,
    onFinish: updateInputs
  });
  instance = $range.data("ionRangeSlider");
  
  function updateInputs(data) {
    from = data.from;
    to = data.to;
    $inputFrom.prop("value", from);
    $inputTo.prop("value", to);
  }
  
  $inputFrom.on("input", function () {
    var val = $(this).prop("value");
    // validate
    if (val < min) {
      val = min;
    } else if (val > to) {
      val = to;
    }
    instance.update({
      from: val
    });
  });
  
  $inputTo.on("input", function () {
    var val = $(this).prop("value");
    // validate
    if (val < from) {
      val = from;
    } else if (val > max) {
      val = max;
    }
    instance.update({
      to: val
    });
  });
});



$(document).ready(function () {

  var table = $('#ajaxTable').DataTable({
    ajax: "../../dados/opcoes.json",
    columns: [
      { data: 0 },
      { data: 1 },
      { data: 2 },
      { data: 3 },
      { data: 4 },
      { data: 5 },
      { data: 6 },
      { data: 7 },
      { data: 8 },
      { data: 9 },
      { data: 10 },
      { data: 11 },
      { data: 12 },
      { data: 13 },
      { data: 14 },
      { data: 15 },
    ],
  });

  // Event listener to the two range filtering inputs to redraw on input
  $('#min, #max').keyup(function () {
    table.draw();
  });
});

[IonDen]

Basic idea behind many sliders is that you need to have many of everything else (instances, support functions, etc.)

To not to do it manually (that usually leads to mistakes like yours). I would recommend you to create a wrapper class, which will generate all logic for every range slider you are using and have a public methods to control it.

I can give you a small hint how to do that, but for the rest - please go to StackOverflow. Because this is already an off-topic and your job to figure it out 😃

Hint:

class IonRangeWrapper {
  constructor() {
    // init ion.rangeSlider
    // create instance
    // connect it to inputs
  }
  
  update() {} // public method
}

// then you will just create as many instances of that class as needed, like this.

const slider1 = new IonRangeWrapper(config);
const slider2 = new IonRangeWrapper(config);

[IonDen]

Fixed

http://live.datatables.net/sivelagi/1/edit