将 HTML 滑块 'max' 范围绑定到输入字段的值
Tying an HTML slider 'max' range to an input field's value
如何将 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>
谢谢!!
编辑:抱歉我误解了问题。
使用以下JQuery
var value = $('#Profit').val (); //Get the profit input
$('#pSlider').attr('max',value); //Set the value of the max attribute
脚本中的这一变化改变了滑块上的值和颜色,但实际上并没有滑动条。
$(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"));
});
});
以下JavaScript正在运行
document.getElementById("Profit").onchange = function() {MaxPCalculate()}; function MaxPCalculate() { var MaxProfit = document.getElementById("pSlider"); MaxProfit.max = document.getElementById("Profit").value; }
如何将 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>
谢谢!!
编辑:抱歉我误解了问题。
使用以下JQuery
var value = $('#Profit').val (); //Get the profit input
$('#pSlider').attr('max',value); //Set the value of the max attribute
脚本中的这一变化改变了滑块上的值和颜色,但实际上并没有滑动条。
$(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"));
});
});
以下JavaScript正在运行
document.getElementById("Profit").onchange = function() {MaxPCalculate()}; function MaxPCalculate() { var MaxProfit = document.getElementById("pSlider"); MaxProfit.max = document.getElementById("Profit").value; }