Question

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

用户被迫设置如下值：

何时，我希望用户能够设置如下值：

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

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

*注意：我的JSFiddle唯一的问题是如果你单击滑块的边框，它不算作类ui-slider-range（但是一些CSS调整应该可以修复它）。

Answer 1

你的答案应该在这里

Drag the Range of a UI Input Range Slider

Answer 2

看这里：

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

以下代码效果很好，是原始jsfiddle的扩展。我终于理解了你想要的东西，现在似乎工作正常：

Live Working Code Sample

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

滑动整个jQuery滑块范围

2 个答案: