noUiSlider value undefined after changing handle direction

Question

I create a slider, change the orientation:'vertical' and link the "span" with it so that I can update and set the values as I drag/tap the slider. It works well, but as soon as I put the Handle at the bottom with the direction: 'rtl', span outputs undefined.

I saw the same problem on the NoUiSlider site although the slider is horizontal, but the problem is still there.

Per default, the direction of the handles of the slider is set to "ltr" or "left-to-right". When the orientation of the slider is set to vertical the Handle acts the same way, they adjust either "ltr = top-to-bottom" or "rtl = bottom-to-top".

var slider = document.getElementById('sl1');
noUiSlider.create(slider, {
    start: 1,
    step: 1,
    connect: 'lower',
    direction: 'rtl',
    orientation: 'vertical',
    range: {
        'min': 1,
        'max': 32
    },
    format: wNumb({
        decimals: 0,
    })
});

var input = document.getElementById('input-with-keypress1');

slider.noUiSlider.on('update', function(values, handle) {
    input.value = values[handle]; //When the slider value changes, update the   input
});

slider.noUiSlider.on('set', function(values, handle) {
            input.value = values[handle];

JsFiddleDemo

I don't know why, but it seems the External Resource links won't render the slider, Excuse me but I'm a noob and maybe I just got the syntax wrong (works local though)..