1

私はjqueryの範囲スライダーで遊んでいます.2つの値を異なる入力に分割することができました. 今は怒らないでください、私はまだjqueryに慣れていないので、各入力がスライダーのハンドルに従うように設定する方法を考えていましたか?

この例のように: http://egorkhmelev.github.io/jslider/

今までの私のコードは次のようになります。

脚本：

$(function() {
    $( ".slider-assets" ).slider({
        range: true,
        min: 100,
        max: 500,
        values: [ 200, 300 ],
        slide: function( event, ui ) {
            $( ".amount-assets1" ).val( ui.values[ 0 ] + "k €");
            $( ".amount-assets2" ).val( ui.values[ 1 ] + "k €" );
        }
        });
        $( ".amount-assets1" ).val($( ".slider-assets" ).slider( "values", 0 ) + "k €" );
        $( ".amount-assets2" ).val($( ".slider-assets" ).slider( "values", 1 ) + "k €" );
});

html:

<input type="text" class="amount-assets1" />
<input type="text" class="amount-assets2" />
<div class="slider-assets"></div>

CSS:

.amount-assets1,.amount-assets2{
    width: 48px;
}

ここで私の jsfiddle を見て遊ぶことができます: http://jsfiddle.net/dzorz/sJBLh/

問題は、どこから始めればよいかわからないことです。ツールチップをハンドルなどの上に置く別のプラグインが必要ですか?

どんな提案や解決策も大歓迎です。

ありがとう。

4

2 に答える 2

0

さて、私はそれを機能させることができました：http://jsfiddle.net/dzorz/X3DVv/

スクリプトは少し複雑ですが、機能します：

    $(function() {
    $( ".slider-assets" ).slider({
        range: true,
        min: 100,
        max: 500,
        values: [ 200, 300 ],
        slide: function( event, ui ) {
            $( ".amount-assets" ).val( ui.values[ 0 ] + "k € - " + ui.values[ 1 ] + "k €");

            $('.ui-slider-handle:first').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[0]  + "k €" + '</div></div>');
            $('.ui-slider-handle:last').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[1]  + "k €" + '</div></div>');

        }
        });
        $( ".amount-assets" ).val($( ".slider-assets" ).slider( "values", 0 ) + "k € - " + $( ".slider-assets" ).slider( "values", 1 ) + "k €" );

        $('.ui-slider-handle:first').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + $(".slider-assets").slider("values", 0)  + "k €" + '</div></div>');
        $('.ui-slider-handle:last').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + $(".slider-assets").slider("values", 1)  + "k €" + '</div></div>');
});
于 2013-09-19T10:31:18.843 に答える