how to set default preview width to Rickshaw.Graph.RangeSlider

I am new to Rickshaw JS toolkit. In the example give at http://code.shutterstock.com/rickshaw/examples/extensions.html the preview bar(Rickshaw.Graph.RangeSlider) at the bottom of the graph used to select the time frame is by default the total time frame available.

How to customize the default preview as last one minute and minimum preview width for RangeSlider?

Thanks in Advance.

Solution

It looks all the zooming and preview redraw stuff is done right inside the mousemove handler. So there doesn't appear to be any way to change or default the preview width other than using those event handlers - odd that it's not factored out somewhere so you can manually set the zoom?

As a horrible hack you can explicitly trigger a series of mouse events to simulate a mouse down/drag/up, setting the clientX value based on whatever fraction of the container width you want to move to. For example (in Chrome) we send mousedown to the left handle, then mousemove ane mouseup to document, where w is my container width and I want to zoom to the range t1 - t2 instead of the default t0 - t2.

    // fake handle move
    edown = document.createEvent("HTMLEvents");
    edown.initEvent("mousedown", true, true);
    edown.clientX = 0;
    emove = document.createEvent("HTMLEvents");
    emove.initEvent("mousemove", true, true);
    emove.clientX = 0.9 * w * (t1 - t0) / (t2 - t0) ;
    eup = document.createEvent("HTMLEvents");
    eup.initEvent("mouseup", true, true);
    $('#slider .left_handle')[0].dispatchEvent(edown);
    document.dispatchEvent(emove);
    document.dispatchEvent(eup);