12

いくつかの入力 + スライダーの組み合わせで動作するように、いくつかのスライダー コードを一般化しようとしています。

基本的にすべてが機能しています-スライダーをスライドすると、入力値が更新されるか、入力に数値を入力すると、スライダーが適切な場所に移動します。

ただし、入力のデフォルト値からスライダーを初期化するのに問題があります。私のコードは次のようになります。

Javascript

$(".slider").slider({
        min: 0,
        max: 5,
        value: $(this).parent().find(".inputNumber").val(),
        step: 0.25,
        slide: function (event, ui) {
            $(this).parent().find(".inputNumber").val(ui.value);
        }
    });

HTML

    <div class="inputWrap hidden">
    <input class="mini inputNumber" type="text" value="0.5">
    <div class="slider"></div>
    </div>
4

2 に答える 2

24

これは私にとってはうまくいきます（任意の数のスライダーで）：

$(".slider").slider({
    min: 0,
    max: 5,
    step: 0.25,
    slide: function (event, ui) {
        $(this).parent().find(".inputNumber").val(ui.value);
    },
    create: function(event, ui){
        $(this).slider('value',$(this).parent().find(".inputNumber").val());
    }
});

デモ: http://jsfiddle.net/darkajax/uv5aC/

于 2013-04-08T21:33:10.147 に答える
3

これはうまくいくようです

$(".slider").each(function(){
    $(this).slider({
    min: 0,
    max: 5,
    step: 0.25,
    slide: function (event, ui) {
        $(this).parent().find(".inputNumber").val(ui.value);
    }
}).slider( "option", "value", $(this).parent().find(".inputNumber").val() );
});

フィドル

于 2013-04-08T21:13:17.950 に答える