1

ステップが定義された複数値のjQueryスライダーがあり（別のスライダーで定義されています。たとえば、step：15であると偽ってみましょう）、範囲は0〜600です。ユーザーが通常のように2つの値を左右にドラッグできるようにしたいと思います。ただし、2つの値の内側でクリックを実行すると、範囲全体を左右にドラッグできるはずです。

ユーザーは次のような値を設定する必要があります。

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

の場合、ユーザーが次のような値を設定できるようにします。

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

これらの数値は引き続きスライダーのstep：15ルールに従いますが、値を30の増分（0,15,30、..、585,600）にスナップする必要があるため、jQueryスライダーの基本ではアクセスできません。これを行うために私が考えることができる最も直感的な方法は、ユーザーが値の「範囲」を左右にドラッグできるようにすることです。ただし、2つの値の間にあるスライダーをクリックすると、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 に答える