Javascript scope of variables in and out of functions

Question

I've checked a few topics here on stackoverflow, but couldn't really find an answer for my problem. I need to set the length of dates as range of my slider (see code below). I get an error that dates is not defined. If I call the same value in the slide function, it gets the right value. I am a bit confused by the scope of the variable. Can someone explain this?

var dates;

$(document).ready(function() {
    $.post('/api/test', {value: 5}, function(result) {
        if(result.success) {
            dates = result.dates;
            console.log(dates.length); //Log: 255
            //...
        }
    }, 'json');

    console.log(dates.length); //Log: dates is undefined

    $( "#slider" ).slider({
        range: [0, dates.length], //Log: dates is undefined
        slide: function(event, ui) {
            console.log(dates.length); //Log: 255
        }
    });
});