滑动整个 jQuery 滑块范围

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

我有一个多值 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 调整应该能够解决此问题)。

javascript jquery jquery-ui slider range
2个回答
1
投票

你的答案应该在这里

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


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%;
}
© www.soinside.com 2019 - 2024. All rights reserved.