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

时间:2016-05-06 00:54:40

标签: javascript jquery html uislider

如何将jQuery uiSlider的'max'范围值设置为用户可编辑输入字段的值?

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

谢谢!

3 个答案:

答案 0 :(得分:1)

编辑:抱歉,我误解了这个问题。

使用以下JQuery

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

答案 1 :(得分:0)

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

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


    });

答案 2 :(得分:0)

以下JavaScript正在运作

SSL operation failed with code 1. OpenSSL Error messages:
error:14090086:SSL routines:SSL3_GET_SERVER_CERTIFICATE:certificate verify failed

Fiddle