Question

Essentially what I’ve got going is a single-handle jQuery UI slider for a bunch of dates. The date range chosen is ALWAYS two weeks. What I’d like to do is just show a range (the range doesn’t have to be functional – just displayed) from the start date of the two week range (which is the date the handle resides on), two weeks forward. This range is fixed.

For example, if the handle is on Jan 1st, I’d like a range to extend to Jan 14th. If the slider moves to Jan 3rd, I’d like the range to move with it to end on the 16th.

Does anyone know if this is possible?

Answer 1

The jQuery UI slider wasn’t designed with that in mind, but you can handle the slide and stop events of the slider yourself to reset the range values however you like.

http://docs.jquery.com/UI/Slider

This doesn’t address all of your requirements by any means, but it’s a start.

$('#myslider').slider({
    min:1,
    max:31,
    values:[1, 14],
    step:1,
    range:true,
    slide:function(event, ui) {
        var s = $(this);
        var values = s.slider('option', 'values');

        if(ui.handle.nextElementSibling == null) // max slider
            values[0] = values[1] - 14;
        else // min slider
            values[1] = values[0] + 14;

        s.slider('option', 'values', values);
    },
    stop:function() {
        var s = $(this);
        var min = s.slider('option', 'min'),
            max = s.slider('option', 'max'),
            values = s.slider('option', 'values');

        if(values[0] <= min)
            values = [min, min + 14];
        if(values[1] >= max)
            values = [max - 14, max];

        s.slider('option', 'values', values);
    }
});