-1

ここから同じ質問があります: jQuery UI Slider: ハンドルに沿って (一緒に) 値を移動します

"ページで jQuery UI スライダー コンポーネントを使用して、価格の範囲を設定しました。それらの ui.values[] を使用して、他の div に新しい値を設定して表示することもできます。つまり、ハンドルを $100 に移動した場合、そのハンドルのすぐ下に "$100" というテキストを設定します。 "

回答（http://jsfiddle.net/william/RSkpH/1/）がありましたが、スライダーの「アニメーション：「遅い」」機能に問題があります。ハンドルで値をアニメーション化する方法も教えてください。そして、私のスライダーは移動後にゴミを残します:( http://data2.floomby.com/files/share/2_4_2013/6TZ1DOmbk2pRqvCF0nfVw.jpg

ありがとう

$("#slider").slider({
    range: true,
    min: 100,
    max: 500,
    step: 10,
    values: [100, 500],
    animate: "slow",
    slide: function(event, ui) {
        var delay = function() {
            var handleIndex = $(ui.handle).data('index.uiSliderHandle');
            var label = handleIndex == 0 ? '#min' : '#max';
            $(label).html('$' + ui.value).position({
                my: 'center top',
                at: 'center bottom',
                of: ui.handle,
                offset: "0, 10"
            });
        };
        // wait for the ui.handle to set its position<br>
        setTimeout(delay, 5);
    }
});
4

1 に答える 1

0

changeコールバックの代わりにコールバックを使用する必要がありslideます。changeスライダーの値が変更されるたびに起動されます。これは必要なものです。

//...
change: function(event, ui) {
    var delay = function() {
    //...

編集

問題は、提供するすべてのイベントがsliderアニメーションが終了する前に発生することです。これにより、ハンドルが移動する前に値が設定され、ハンドルが最終位置に達したときにキャプチャするコールバックがトリガーされないため、ハンドルの下にラベルを実際に移動するのが少し難しくなります。

ハンドル要素内にラベルを配置する方が便利だと思います。このように、それらは自分でハンドルの下に保持されます。このフィドルを参照してください：http://jsfiddle.net/ohcibi/RvSgj/2/

アップデート

最後のフィドルは Chromium for Linux では機能しないようで、奇妙な gfx エラーが発生します (スクリーンショットのコメントを参照)。ただし、Firefox 19.0.2、Opera 12.14、および最新の Chrome for Windows では問題なくレンダリングされます。

于 2013-04-02T00:41:22.770 に答える