2

jquery Sliderの範囲で私を助けてくれる人はいますか? 私はjQueryを初めて使用し、左右のドラッグ範囲で最小（右矢印アイコン）と最大（左矢印アイコン）を達成しようとしています。

価格帯: 0 - 1000 == (>) ======== (<) ===

これらのアイコンを右矢印と左矢印の個人的な画像に置き換えたいです。出来ますか？

画像も添付しました。

$(function() {
    var values = [0,25,50,100,200,400,700,1000];
    $( "#slider-range" ).slider({
        range: true,
        min: 0,
        max: 1000,
        step:50,
        orientation: "horizontal",
        values: [ 0,1000 ],
        slide: function( event, ui ) {
            $( "#amount" ).val( "£" + ui.values[ 0 ] + " - £" + ui.values[ 1 ] );
            console.log("From: "+ui.values[0],"To: "+ui.values[1]);
            $( "#min" ).val( ui.values[ 0 ] );
    $( "#max" ).val( ui.values[ 1 ] );
        }
    });
    $( "#amount" )
    .val( "£" + $( "#slider-range" )
    .slider( "values", 0 ) + " - £" + $( "#slider-range" )
    .slider( "values", 1 ));
});
$( "#slider-range a").hide();
4

2 に答える 2

1

マークアップをざっと見てみると、jQuery-UI は 2 つのスライダーを区別していないようです。それは大きな問題ではありません。スライダーを構築する際に、それに応じてmin-valueとmax-valueを追加することをお勧めしますui-slider-handle。このような何かがうまくいくはずです：

$('#slider-range').slider({
     range: true,
     min: 0,
     max: 1000,
     step:50,
     orientation: "horizontal",
     values: [ 0,1000 ],
     slide: function(event, ui) {
          $('#amount').val( "£" + ui.values[ 0 ] + " - £" + ui.values[ 1 ] );
          $('#min').val( ui.values[ 0 ] );
          $('#max').val( ui.values[ 1 ] );
     }
}).find('.ui-slider-handle')
     .eq(0).addClass('min-slider').end()
     .eq(1).addClass('max-slider');

これらのクラスを配置したら、CSS をセットアップしてそれらをターゲットにし、必要に応じて外観を操作できます。:)

于 2012-08-06T14:46:35.597 に答える
0

スライダー ハンドルは、クラスによって識別できますui-slider-handle。background-imageCSS を使用するものに a を追加してみてください。

#my-slider .ui-slider-handle { background-image: url(min.png); }

background-*適切に機能させるために、他のプロパティを設定する必要がある場合があります。

2 番目のスライダー (HTML で最初のスライダーの直後にある) に別の背景画像を配置することは、ポスターの演習として残されています。

于 2012-08-06T14:41:10.717 に答える