将 HTML 滑块“最大”范围绑定到输入字段的值

Posted

技术标签:

【中文标题】将 HTML 滑块“最大”范围绑定到输入字段的值【英文标题】:Tying an HTML slider 'max' range to an input field's value 【发布时间】:2016-05-06 00:54:40 【问题描述】:

如何将 jQuery uiSlider 的“最大”范围值设置为用户可编辑输入字段的值?

这是我的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>

谢谢!!

【问题讨论】:

【参考方案1】:

编辑:对不起,我误解了这个问题。

使用下面的 JQuery

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

【讨论】:

感谢 CVarg - 这会将利润输入的值设置为 html 标记中定义的“max”属性的值。我需要调整 max 属性以匹配利润字段的 USER 输入。 我更新了代码以获得我想要的结果。这是更新的Fiddle【参考方案2】:

脚本中的这种更改会更改滑块上的值和颜色,但实际上不会滑动条。

        $(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"));
            );


    );

【讨论】:

谢谢 T 沙阿。这很有帮助,即使它没有回答我原来的问题。我会将此脚本添加到我的最终版本中。 T Shah - 你知道如何让滑块“滑动”以及调整突出显示颜色吗? - Fiddle【参考方案3】:

以下 javascript 正在运行

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

~Fiddle

【讨论】:

以上是关于将 HTML 滑块“最大”范围绑定到输入字段的值的主要内容,如果未能解决你的问题,请参考以下文章

R Shiny 输入滑块范围值

是否可以根据其他表单的输入来更改 HTML5 范围滑块的最小值和最大值?

html5输入类型范围总是指向最小值并且没有在文本输入上获得onChange

从输入类型=范围中获取值

使用曲线将输入范围弧形拇指连接到滑块

jQuery范围滑块 - 获取表单提交的范围值?