0

jQuery 1.7.3 と jQuery UI 1.9.1 を使用しています。

jQuery レンジ スライダー (http://jqueryui.com/slider/#range) を使用しています。ページにいくつかのスライダーを設定しましたが、それらは非常にうまく機能し、いくつかは非常にうまく機能しません。私の考えでは、jQuery は適切なデータ ポイントを作成してスムーズに実行する方法を正確に認識していないか、低い数値と高い数値の間に十分なデータ ポイントがありません。

これらの範囲はスムーズにスライドするため、非常にうまくスライドします。

Impedance 50ohm - 64ohm
Width 1.4in - 5.8in
Cable length 300cm - 1500cm
Cable length 2ft - 250ft
Depth 6.392in - 12.5in
Depth 161mm - 318mm

これらの範囲は、スライドがぎくしゃくしているため、スライドが非常に不十分です。

Shipping Weight 0.2kg - 2.2kg
Depth 0.9in - 1.16in
Shipping Weight 1lbs - 2lbs
Shipping Weight 0.008kg - 0.5kg

スライダーに必要なデータ ポイントの数を定義する方法はありますか? より滑らかなスライダーを作成する方法はありますか? これに役立つドキュメントは見つかりませんでした。

4

1 に答える 1

1

滑らかなスライダーを作成する必要がある同様の問題に遭遇し、スライダーを非常に滑らかに見せるために次のことを行いました（実装はこちら-四半期/年次スライダーを参照）

  1. 非常に小さなステップ値 (0.0025 の値を使用しましたが、各ステップの望ましい値は 1 単位でした)
  2. スライダーのスライドおよび/または変更イベントに機能を割り当てます。この関数は、スライダーの実際の値 (0.0025 の倍数) を必要なステップ値 (1、2、3 など) に変換し、計算に使用します。
  3. スライダーの現在の値から必要な値 (1、2、3 など) までスライダーをスライドさせる機能をスライダーの停止イベントに割り当てます。

例

// Slider init 
$('#my-slider').slider({
    value : 6,
    min : 1,
    max : 6,
    animate : true,
    step : 0.0025,
    slide : slide_fn,
    change : slide_fn,
    stop : stop_fn,
});

// Slide function
function slide_fn(e, ui) {
    var value = get_desired_value(ui.value);
    // Do your stuff
}

// Stop function
function stop_fn(e, ui) {
    var value = get_desired_value(ui.value);
    // slide to the desired value
    setTimeout(function() {
        $("#my-slider").slider("value" , value);
    }, 300);
}

// get desired value - can be modified as per your requirements
// idea here is to assign anything between 0.5 to 1.5 to value 1, 1.5 to 2.5 to 2 and so on 
function get_desired_value(ui_value) {
    var float_value = parseInt(parseFloat(ui_value) * 1000) / 1000;
    var int_value = parseInt(float_value);
    if (float_value > int_value - 0.5 && float_value <= int_value + 0.5) {
        return int_value;
    } else if (float_value > int_value + 0.5) {
        return (int_value + 1);
    }
}

上記のコードをテストしていませんが、アイデアは得られるはずです

于 2012-11-19T13:45:27.367 に答える