滑动整个 jQuery 滑块范围

Question

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

用户被迫设置如下值：

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

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

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

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

Answer 1

1
投票

你的答案应该在这里

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

Answer 2

看这里：

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

滑动整个 jQuery 滑块范围

问题描述投票：0回答：2

2个回答

最新问题

滑动整个 jQuery 滑块范围

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2