1

我有一个带有定义步骤的多值 jQuery 滑块（它由另一个滑块定义，假设它是一个步骤：15），范围为 0-600。我希望用户能够像往常一样左右拖动这两个值。但是如果在两个值内执行单击，它们应该能够左右拖动整个范围。

用户被迫设置如下值：

0,600
15,120
240,255
150,150

什么时候，我希望用户能够设置如下值：

1,271
15,165
25,115
580,595

这些数字仍然遵循滑块的 step:15 规则，但无法使用 jQuery 滑块的基础知识来访问，因为它希望将值捕捉到 30 个增量（0,15,30,...,585,600）。我能想到的最直观的方法是让用户左右拖动他们的值“范围”。但是当在两个值之间单击滑块时，jQuery 会将其设置为新值。

我已经使用滑块的启动事件来检测用户是否在范围内单击（而不是单击句柄或滑块的未选择部分）。然后我需要在滑块中设置某种滑动功能，不断检测鼠标位置并像这样左右滑动。我处于 Javascript 的中级水平（在我看来）并且不太确定我将如何去做。你可以玩我的 JSFiddle：http: //jsfiddle.net/JhKxh/9/

*注意：我的 JSFiddle 的唯一问题是，如果您单击滑块的边框，它不会算作 ui-slider-range 类（但一些 CSS 调整应该能够解决这个问题）。

4

2 回答 2

1

你的答案应该在这里

拖动 UI 输入范围滑块的范围

于 2012-10-09T03:56:36.707 回答
0

看这里：

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

以下代码运行良好，是您原始 jsfiddle 的扩展。我终于明白了你想要什么，现在它似乎工作正常：

实时工作代码示例

JavaScript：

$(document).ready(function () {
    'use strict';

    var stepSlider = $('#stepSlider');
    var stepText = $('#stepText');
    var rangeSlider = $('#rangeSlider');
    var rangeText = $('#rangeText');
    var oldStep;

    stepSlider.slider({
        min:0,
        max:120,
        slide:function (event, ui) {
            stepText.text(ui.value);

            var rsValues = rangeSlider.slider("option", "values");
            var stepDiff = ui.value - oldStep;
            var rsMax = rangeSlider.slider("option", "max");
            var rsMin = rangeSlider.slider("option", "min");
            if (stepDiff > 0) {
                rsValues[1] += stepDiff;
                if (rsValues[1] > rsMax) {
                    rsValues[0] = rsMax - ui.value;
                    rsValues[1] = rsMax;
                }
            } else if (stepDiff < 0) {
                rsValues[1] += stepDiff;
                if (rsValues[1] < rsMin) {
                    rsValues[0] = rsMin;
                    rsValues[1] = ui.value;
                }
            }
            rangeSlider.slider("option", "values", rsValues);
            rangeText.text(rsValues[0] + ' - ' + rsValues[1]);
            oldStep = ui.value;
        }
    });

    rangeSlider.slider({
        min:0,
        max:600,
        values:[0, 0],
        slide:function (event, ui) {
            var step = stepSlider.slider("option", "value");
            var oldValues = rangeSlider.slider("option", "values");
            var rsMax = rangeSlider.slider("option", "max");
            var rsMin = rangeSlider.slider("option", "min");
            var diff;

            if (oldValues[0] != ui.values[0]) {
                diff = ui.values[0] - oldValues[0];
                if (diff > 0 && diff <= step && ui.values[1] === rsMax) {
                    return false;
                }
                ui.values[1] += diff;
                if (ui.values[1] > rsMax) {
                    ui.values[1] = rsMax;
                    ui.values[0] = ui.values[1] - step;
                }
                rangeSlider.slider("option", "values", ui.values);
                rangeText.text(ui.values[0] + ' - ' + ui.values[1]);
                return false;
            }
            if (oldValues[1] != ui.values[1]) {
                diff = ui.values[1] - oldValues[1];
                if (diff < 0 && diff >= -step && ui.values[0] === rsMin) {
                    return false;
                }
                ui.values[0] += diff;
                if (ui.values[0] < rsMin) {
                    ui.values[0] = rsMin;
                    ui.values[1] = ui.values[0] + step;
                }
                rangeSlider.slider("option", "values", ui.values);
                rangeText.text(ui.values[0] + ' - ' + ui.values[1]);
                return false;
            }
            rangeText.text(ui.values[0] + ' - ' + ui.values[1]);
        }
    });
    oldStep = stepSlider.slider("option", "value");
});

HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Sliders</title>
        <link href="rangeSliders.css" rel="stylesheet" type="text/css"/>
        <link href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
        <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
        <script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
    </head>
    <body>
        <div id="stepSlider">
            <div id="stepText">0</div>
        </div>

        <div id="rangeSlider">
            <div id="rangeText">0-600</div>
        </div>
        <script type="text/javascript" src="rangeSliders.js"></script>
    </body>
</html>

CSS：

body {
    margin: 50px;
}

#stepSlider, #rangeSlider {
    width: 200px;
    margin-bottom: 25px;
}

#stepText, #rangeText {
    margin: -4px 0 0 225px;
    width: 100%;
}
于 2012-10-09T02:45:58.967 回答