Question

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.val(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!

Answer 1

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 🙂