Starting position at bottom of MooTools slider class instead of top

Question

Is there a way to hook into the MooTools Slider class, so the starting position of the knob is at the bottom (step 0) of the bar and you drag the knob up to get to the top of the bar (step 100).

This is what I have so far:

var slider1 = new Slider('#bar', '#knob', {
    offset: 6,
    steps: 100,
    mode: 'vertical'
});

And what I need:

slider1.startingPosition = 'bottom';

Or something to that affect.

Answer 1

Since steps is defined to 100, your max value is 100, which is what you want to set as initialStep (the slider starting point).

For your specific CSS I would remove (or add it womewhere else) the margin on the element of the slider, so it wont shift the slider.

This worked for me:

var slider = $('bar');

var slider1 = new Slider(slider, slider.getElement('.knob'), {
    offset: 6,
    steps: 100,
    initialStep: 100,
    mode: 'vertical',
    onChange: function (step) {
        console.log(step);
    }
});

And changed also margin top here to 0px: margin: 0px 0 0 -7px;

Fiddle