I'm using the DataTables custom filtering template from https://datatables.net/examples/plug-ins/range_filtering.html and I added a jQuery UI Slider to the textboxes and the values in the textbox changes on slide.

There's already a keyup event listener to redraw the table if value in textbox is changed on key up but I tried adding an on change event listener and it doesn't seem to redraw the table once the values in the textbox changes.

Here's the changes I made

 $.fn.dataTable.ext.search.push(
    function( settings, data, dataIndex ) {
        var min = parseInt( $('#minOP').val(), 10 );
        var max = parseInt( $('#maxOP').val(), 10 );
        var value = parseFloat( data[3] ) || 0; // use data for the op column
 
        if ( ( isNaN( min ) && isNaN( max ) ) ||
             ( isNaN( min ) && value <= max ) ||
             ( min <= value   && isNaN( max ) ) ||
             ( min <= value   && value <= max ) )
        {
            return true;
        }
        return false;
    }
);

$('#minOP, #maxOP').keyup( function() {
                table.draw();
            } );
    
$('#minOP, #maxOP').on('change', function() {
                table.draw();
            } );

<table class="oprange" border="0" cellspacing="5" cellpadding="5">
    <tbody><tr>
            <td>Minimum OP(%):</td>
            <td><input type="text" id="minOP" name="minOP" style="width: 50px;"></td>
        </tr>
        <tr>
            <td>Maximum OP(%):</td>
            <td><input type="text" id="maxOP" name="maxOP" style="width: 50px;"></td>
        </tr>
        </tbody>
</table>

the jQuery UI Slider

var rangeMin = <?php echo $rangeMin ?>;
        var rangeMax = <?php echo $rangeMax ?>;
        $(function() {
        $( "#slider-range" ).slider({
            range: true,
            min: rangeMin,
            max: rangeMax,
            values: [ rangeMin, rangeMax ],
            slide: function( event, ui ) {
                $( "#minOP" ).val( ui.values[ 0 ] + "%" ); 
                                $( "#maxOP" ).val( ui.values[ 1 ] + "%" );
                 }
             });   
                
            },
            change: function( event, ui ){
            }
            
        });
    $( "#minOP" ).val( $( "#slider-range" ).slider( "values", 0 )+ "%");
            $( "#maxOP" ).val( $( "#slider-range" ).slider( "values", 1 ) + "%" );
    });