jquery ui slider and datatable conflict

webmaster

I was using jquery ui slider and datatable for different purpose. Both are not working on same page. If i remove on plugin other is working and vice-versa.

If i remove "value: 50" line then datatable is working...

Here is my jquery slider script

    var J = jQuery.noConflict();
    J("#slider-snap-inc").slider({
        isRTL: Metronic.isRTL(),
        value: 50,
        min: 0,
        max: 100,
        step: 1,
        slide: function (event, ui) {
            J("#slider-snap-inc-amount").text(ui.value + "% complete");
            J("#project_progress").val(ui.value);
        }
    });
    J("#slider-snap-inc-amount").text(J("#slider-snap-inc").slider("value") + "% complete");
    J("#project_progress").val(J("#slider-snap-inc").slider("value"));

And datable script is as below

var table = $('.datatableclass');
$.extend(true, $.fn.DataTable.TableTools.classes, {
    "container": "btn-group tabletools-btn-group pull-right",
    "buttons": {
        "normal": "btn btn-sm default",
        "disabled": "btn btn-sm default disabled"
    },
    "collection": {
        "container": "DTTT_dropdown dropdown-menu tabletools-dropdown-menu"
    }
});

var oTable = table.dataTable({
    "order": [
        [0, 'asc']
    ],

    "lengthMenu": [
        [5, 15, 20, -1],
        [5, 15, 20, "All"]
    ],
    "pageLength": 10,
    "sAjaxSource": public_path + "data.txt",
    "fnInitComplete": function(oSettings, json) {
      $('.dataTables_filter>label>input').attr('id', 'search');
    }
});

Whats wrong with both the scripts they are not working in same page...