基本上,我有 2 个使用 Jquery 实现的 slider 。 I want to set the value in such a way that, when the first slider is selected say a range ex: 0-36.我希望将第二个 slider 的最大值动态设置为 36。这是代码。我无法将值设置为第二个 slider ,请帮忙。
$(function() {
$( "#slider-range-min" ).slider({
range: "min",
value: 0,
min: 0,
max: 100,
slide: function( event, ui ) {
$( "#greenData" ).val( "0 - " + ui.value );
}
});
$( "#greenData" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) );
});
$(function() {
$( "#slider-range-min-amber" ).slider({
range: "min",
value: 0,
min: 0,
max: 100,
slide: function( event, ui ) {
$( "#amberData" ).val( "0 - " + ui.value );
}
});
$( "#amberData" ).val( "$" + $( "#slider-range-min-amber" ).slider( "value" ) );
});
这是 HTML 代码:
<tr>
<td align="right"><label for="greenValue"
style="font-family: sans-serif; font-size: small;">
Green</label>
</td>
<td> <div id="slider-range-min"> </div> </td>
<td> <input type="text" id="greenData" style="border: 0; color: green; font-weight: bold;" readonly="readonly" />
</td>
</tr>
<tr>
<td align="right"><label
style="font-family: sans-serif; font-size: small;">
Amber</label>
</td>
<td id="amberTdId"> <div id="slider-range-min-amber"> </div> </td>
<td> <input type="text" id="amberData" style="border: 0; color: #FF7E00; font-weight: bold;" readonly="readonly" /> </td>
</tr>
当我选择从 0-36 的绿色 slider 范围时,值 36 应设置为 slider 2。即.. 第二个 slider 范围应为最小值:0 和最大值:36
我该怎么做。 提前致谢。
最佳答案
试试这段代码:
$(function() {
$( "#slider-range-min-amber" ).slider({
range: "min",
value: 0,
min: 0,
max: 100,
slide: function( event, ui ) {
$( "#amberData" ).val( "0 - " + ui.value );
}
});
$( "#amberData" ).val( "$" + $( "#slider-range-min-amber" ).slider( "value" ) );
});
$(function() {
$( "#slider-range-min" ).slider({
range: "min",
value: 0,
min: 0,
max: 100,
slide: function( event, ui ) {
$( "#greenData" ).val( "0 - " + ui.value );
var value = ui.value;
var max = ui.value;
$( "#slider-range-min-amber" ).slider("option","max",max).slider("value",value);
$( "#amberData" ).val( "0 - " + ui.value );
}
});
$( "#greenData" ).val( "$" + $( "#slider-range-min" ).slider( "value" ) );
});
或者看我的 fiddle :http://jsfiddle.net/QPnxf/1/
关于java - 如何使用 Slider Jquery 设置值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13798508/