Custom filtering with slider range

LucioRives

Hello everybody!

I am trying to make a custom filtering with slider range.
Custom filtering is that : https://datatables.net/examples/plug-ins/range_filtering.html

I have 2 input "min" and "max", the function to filter and the event listener exactly as shown in the example.

But I would like to have a slider to do that.
I tried to modify the "min" and "max" with the slider function (shown bellow) but this only modify "min" and "max" without applying the filter. I guess it is a problem with the listener that is "keyup" but I cannot find a solution to this.

And then I would like to have two sliders and checkboxes with options (but this is maybe another story)

Thank you very much,

//Slider function
$( function() {
    $( "#slider-range" ).slider({
      range: true,
      min: 0,
      max: 70,
      values: [ 0, 70 ],
      slide: function( event, ui ) {
       $( "#min" ).val(ui.values[ 0 ]);
     $( "#max" ).val(ui.values[ 1 ]);
      }
    });
  } );

//Example functions 
$.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        var min = parseInt( $('#min').val(), 10 );
        var max = parseInt( $('#max').val(), 10 );
        var age = parseFloat( data[3] ) || 0; // use data for the age column
 
        if ( ( isNaN( min ) && isNaN( max ) ) ||
             ( isNaN( min ) && age <= max ) ||
             ( min <= age   && isNaN( max ) ) ||
             ( min <= age   && age <= max ) )
        {
            return true;
        }
        return false;
    }
);
 
$(document).ready(function() {
    var table = $('#example').DataTable();
     
    // Event listener to the two range filtering inputs to redraw on input
    $('#min, #max').keyup( function() {
        table.draw();
    } );
} );