是否可以在单手柄jQuery UI滑块上具有固定的静态范围? [英] Is it possible to have a fixed, static range on a one-handle jQuery UI slider?

问题描述

基本上，我要做的是处理一堆日期的单句柄jQuery UI滑块.选择的日期范围总是两周.我想做的只是从两周范围的开始日期(即手柄所在的日期)开始显示一个范围(该范围不必起作用-只是显示).此范围是固定的.

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.

例如，如果手柄在1月1日，我希望范围扩展到1月14日.如果滑块移至1月3日，我希望该范围随其移至16日结束.

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?

推荐答案

设计jQuery UI滑块并不是考虑到这一点，但是您可以自己处理滑块的slide和stop事件以重置范围值，但是您喜欢.

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);
    }
});

这篇关于是否可以在单手柄jQuery UI滑块上具有固定的静态范围?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！