web-dev-qa-db-ja.com

テキストボックス入力のuiスライダー

使用する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>

私がやりたいのは、スライダーと調和して機能するテキスト入力要素を追加することです。これにより、ユーザーが適切なボックスをスライドさせると、増加したり減少したりします。

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

何か助けてください？

プレビューは：

enter image description here

jqueryjquery-uijquery-ui-slider
16
422

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

$("#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/

ここでは検証は行われていません（機能させるには「$」記号を含める必要があります）。それを強化するために、より堅牢な入力サニテーションを追加できます。

27
Andrew Whitaker