Using JqueryUI slider to range filter Datatable results

I am using the plugin the ColumnFilter to render filters for each column in Datatables.

ColumnFilter renders two input boxes (From & To) in order to perform 'range' filtering of a table.

I am trying to replace these input boxes with a jqueryUI slider but cannot seem to make it work.

I have managed to make a slider control two separate 'from' & 'too' inputs with the following code:

//SLIDER

$(function() {
    var $slider = $('#Slider'),
    $lower = $('input#Min'),
    $upper = $('input#Max'),
    min_rent = 0,
    max_rent = 400;

$lower.val(min_rent);
$upper.va开发者_JAVA百科l(max_rent);

$('#Slider').slider({
    orientation: 'horizontal',
    range: true,
    animate: 200,
    min: 0,
    max: 400,
    step: 1,
    value: 0,
    values: [min_rent, max_rent],
    slide: function(event,ui) {
        $lower.val(ui.values[0]);
        $upper.val(ui.values[1]);
    }
});

$lower.change(function () {
    var low = $lower.val(),
        high = $upper.val();
    low = Math.min(low, high);
    $lower.val(low);
    $slider.slider('values', 0, low);
});

$upper.change(function () {
    var low = $lower.val(),
high = $upper.val();
    high = Math.max(low, high);
    $upper.val(high);
    $slider.slider('values', 1, high);
});


});

This works fine and I can see the values change in the two input boxes change as I move the slider.

However, when I swap the input#Min and inut#Max element for the the two input boxes that are rendered by the ColumnFilter plugin. Nothing seems to happen. I cannot see any values update in the input boxes and the table does not auto sort as expected.

Perhaps I am approaching this the wrong way? Is there any other way to make a slider work with Datatables and the Columnfilter plugin?

Many thanks!

The two input boxes used for filtering are being 'listened to' for change event but updating the values via UI sliders does not trigger this.

I had a similar problem and ended up just forcing change() on sliderstop (event triggered by slider on mouseup) because of the dynamic content being loaded on change which I didn't want changing on slide, but you could force change() on slide too.

try:

$lower.change();
$upper.change();

after updating the values with val();

Should work :)