16

使用するUIスライダーがあり、問題なく動作します。

コード：

jQuery(function() {
jQuery( "#slider-range-min" ).slider({
    range: "min",
    value: 1,
    step: 1000,
    min: 0,
    max: 5000000,
    slide: function( event, ui ) {
        jQuery( "#amount" ).val( "$" + ui.value );
    }
});
jQuery( "#amount" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) );
});

ご覧のとおり、ユーザーは 0 から 5,000,000 の間で任意の値を選択できます。

HTML は次のとおりです。

<div id="slider-range-min" style="width: 460px; float:left;margin:10px;"></div>

私がやりたいことは、スライダーと調和して機能するテキスト入力要素を追加することです.

または、ユーザーが入力要素に数字を入力すると、スライダーが適切に移動します。

何か助けてください？

プレビューは次のとおりです。

ここに画像の説明を入力

4

1 に答える 1

27

で要素を更新する必要がありinputます（要素に対して現在行っているように#amount）slide：

$("#slider").slider({
    range: "min",
    value: 1,
    step: 1000,
    min: 0,
    max: 5000000,
    slide: function(event, ui) {
        $("input").val("$" + ui.value);
    }
});

changeさらに、要素のイベントにバインドしinput、スライダーのvalueメソッドを呼び出す必要があります。

$("input").change(function () {
    var value = this.value.substring(1);
    console.log(value);
    $("#slider").slider("value", parseInt(value));
});

例: http://jsfiddle.net/andrewwhitaker/MD3mX/

ここでは検証は行われません (動作させるには "$" 記号を含める必要があります)。それを強化するために、より堅牢な入力サニテーションを追加できます。

于 2011-09-23T04:52:36.610 に答える