HTMLスライダー 'max'の範囲を入力フィールドの値に結びつける

Question

jQuery UIスライダーの '最大'範囲値をユーザー編集可能な入力フィールドの値に設定するにはどうすればよいですか？

は、ここに私のexample

<div data-role="page" id="page1"> 
    <div data-role="header" data-position="fixed"> 
    </div> 
    <div> 
<input name="Profit" id="Profit" value="How do I tie the 'max' range to this input field?" style="font-weight: bold;" /> 
<input name="label" id="label" value="deal" style="font-weight: bold;" /> 

</div> 

<div role="main" class="ui-content"> 

    <ul data-role="listview"> 
    <li> 
     <div id="SlideDesign"> 

     <input type="range" name="pSlider" id="pSlider" min="-1000" max="600" value="300" data-highlight="true" /> 
     </div> 
    </li> 
    </ul> 
</div> 

感謝です！

Answer 1

次のJavaScriptは

document.getElementById("Profit").onchange = function() {MaxPCalculate()}; function MaxPCalculate() { var MaxProfit = document.getElementById("pSlider"); MaxProfit.max = document.getElementById("Profit").value; } 

〜Fiddle

Answer 2

編集：申し訳ありませんが、私は質問を誤解しました。

次のjQuery

に

var value = $('#Profit').val(); //Get the profit input 
$('#pSlider').attr('max',value); //Set the value of the max attribute 

Answer 3

を使用して、スクリプト内のこの変更は、スライダに値や色を変更しますが、実際にバーをスライドさせていません。

 $(document).on("pagecreate", "#page1", function() { 



     HighlightColor($("#pSlider")); 
     $("#pSlider").on("change", function() { 
     HighlightColor($(this)); 
     }); 

     function HighlightColor(slider) { 
     var theVal = slider.val(); 
     var color = "#0DB8B5"; 
     if (theVal < -750) { 
      color = "#D92727"; 
      document.getElementById("label").value = "Red Deal :("; 
      document.getElementById("label").style.color = "red"; 
     } else if (theVal < -425) { 
      color = "#FFAF33"; 
      document.getElementById("label").value = "Orange Deal :/"; 
      document.getElementById("label").style.color = "orange"; 
     } else if (theVal < 0) { 
      color = "#E5E819"; 
      document.getElementById("label").value = "Yellow Deal :|"; 
      document.getElementById("label").style.color = "#E5E819"; 
     } else if (theVal < 400) { 
      color = "#0FB10A"; 
      document.getElementById("label").value = "Green Deal :)"; 
      document.getElementById("label").style.color = "#0FB10A"; 
     } else { 
      color = "#10F909"; 
      document.getElementById("label").value = "Bright Green Deal :D"; 
      document.getElementById("label").style.color = "#10F909"; 
     } 
     slider.closest(".ui-slider").find(".ui-slider-bg").css("background-color", color); 
     } 

     $('#Profit').on("change", function() { 
      //alert($(this).val()); 
     $("#pSlider").val($(this).val()); 
     //$("#pSlider").slider("instance"); 
     HighlightColor($("#pSlider")); 
      }); 


    });