ZoomSlider

//<code-header>
fiddle.title = 'Zoom slider';
//</code-header>
const taskBoard = new TaskBoard({
    appendTo : targetElement,

    features : {
        columnToolbars : false
    },

    tbar : [
        { type : 'zoomslider' }
    ],

    // Columns to display
    columns : [
        'todo',
        'doing',
        'done'
    ],

    // Field used to pair a task to a column
    columnField : 'status',

    // Project using inline data
    project : {
        tasks : [
            { id : 1, name : 'Task 1', status : 'doing' },
            { id : 2, name : 'Task 2', status : 'done' },
            { id : 3, name : 'Task 3', status : 'todo' },
            { id : 4, name : 'Task 4', status : 'todo' },
            { id : 5, name : 'Task 5', status : 'todo' },
            { id : 6, name : 'Task 6', status : 'doing' },
            { id : 7, name : 'Task 7', status : 'done' },
            { id : 8, name : 'Task 8', status : 'done' },
            { id : 9, name : 'Task 9', status : 'todo' },
            { id : 10, name : 'Task 10', status : 'todo' }
        ]
    }
});