レスポンシブデザインで同じフィールドの2つの入力を作成するにはどうすればよいですか？

Question

私はform-groupに数値を入力したレスポンシブデザインフォームを作成しようとしていますが、これはThymeleafとBootstrapを使用しています。私が使用している。そのため

：
私の目標は、モバイルデバイス上のスライダータイプとなり、入力、およびメディアデバイス上のテキストタイプと大きなを作ることです同じフィールドresidentsの2つの異なるdivは、デバイスの画面幅に応じてコンテンツを表示および非表示にします（たとえば、hidden-xs,hidden-sm、hidden-md、hidden-lg）。

<div class="form-group required hidden-sm hidden-md hidden-lg"> 
    <label for="range_02" class="col-sm-2 control-label">Residents:</label> 
    <input id="range_02" type="text" class="form-control" value="1" th:field="*{residents}"/> 
</div> 

<div class="form-group required hidden-xs"> 
    <label for="residents" class="col-sm-2 control-label">Residents:</label> 
    <input id="residents" type="text" class="form-control" th:field="*{residents}" placeholder="4"/> 
</div> 

入力フィールドの表示は大丈夫ですが、ウィンドウの幅を変更している間は変更されます。しかし、同じフィールドに2つの入力を同時に使用することはできないようです - 値はスライダである最初の入力だけを通しています。

また、この2つの入力を同じdivに渡し、テキストとスライダの入力に同じ視認性オプションを使用しました。しかし結果は同じです。

他の入力を隠すだけでなく、をアクティブにしない方法を設定する方法もすでに表示されていますか？

Answer 1

as @JasC。私はJS関数でテキスト入力フィールドを持つ私のスライダーの入力をバインドさ提案：

$(function() { 
    var $range = $("#range_02"), 
     $input = $("#residents"), 
     instance, 
     min = 1, 
     max = 10; 

    $range.ionRangeSlider({ 
     type: "single", 
     min: min, 
     max: max, 
     onStart: function (data) { 
      $input.prop("value", data.from); 
     }, 
     onChange: function (data) { 
      $input.prop("value", data.from); 
     } 
    }); 

    instance = $range.data("ionRangeSlider"); 

    $input.on("change keyup", function() { 
     var val = $(this).prop("value"); 

     if (val < min) { 
      val = min; 
     } else if (val > max) { 
      val = max; 
     } 

     instance.update({ 
      from: val 
     }); 
    }); 
}); 

私は私の建設がうまく機能し、私のフォームに上スライダー入力をテキスト入力を置くことであることを確認する必要がある持っている唯一の事。