Java 如何使用Slider Jquery设置值

基本上，我有两个使用Jquery实现的滑块。我想以这样一种方式设置该值，即当选择第一个滑块时，设定范围ex:0-36。我希望第二个滑块的最大值动态设置为36。这是代码。我无法设置第二个滑块的值，请帮助

$(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时，值36应设置为滑块2。也就是说，。。第二个滑块范围应介于最小值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" ) );
});

或者查看我的小提琴：

尝试以下代码：

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

---

或者看我的提琴：

简单的答案是在$'greenData'.val'0-'+ui.value之后添加以下内容；行：

但是像这样重新查询DOM对性能不好。最好缓存jQuery对象并重用它们。更有效的解决方案如下：

$(function() {
  var green = $('#slider-range-min'),
      amber = $('#slider-range-min-amber'),
      greenData = $('#greenData'),
      amberData = $('#amberData'),
      opts = {
        range: 'min',
        value: 0,
        min: 0,
        max: 100
      };

  greenData.val('$' + opts.value);
  green.slider(opts).slider('option', 'slide', function(e, ui) {
    greenData.val(opts.min + ' - ' + ui.value);

    // this is the bit that updates the 
    // max value of the second slider
    amber.slider('option', 'max', ui.value);
    amberData.val(opts.min + ' - ' + ui.value);
  });

  amberData.val('$' + opts.value);
  amber.slider(opts).slider('option', 'slide', function(e, ui) {
    amberData.val(opts.min + ' - ' + ui.value);
  });
});

---

简单的答案是在$'greenData'.val'0-'+ui.value之后添加以下内容；行：

但是像这样重新查询DOM对性能不好。最好缓存jQuery对象并重用它们。更有效的解决方案如下：

$(function() {
  var green = $('#slider-range-min'),
      amber = $('#slider-range-min-amber'),
      greenData = $('#greenData'),
      amberData = $('#amberData'),
      opts = {
        range: 'min',
        value: 0,
        min: 0,
        max: 100
      };

  greenData.val('$' + opts.value);
  green.slider(opts).slider('option', 'slide', function(e, ui) {
    greenData.val(opts.min + ' - ' + ui.value);

    // this is the bit that updates the 
    // max value of the second slider
    amber.slider('option', 'max', ui.value);
    amberData.val(opts.min + ' - ' + ui.value);
  });

  amberData.val('$' + opts.value);
  amber.slider(opts).slider('option', 'slide', function(e, ui) {
    amberData.val(opts.min + ' - ' + ui.value);
  });
});

---

谢谢@phemt，它工作了，但是下面的代码符合我的要求。谢谢@phemt，它工作了，但是下面的代码符合我的要求。