jquery - 1 つの値を制御する 2 つのスライダー

Question

2 つの jquery スライダー「steps」と「height-of-a-step」を使用して、「div」の高さを制御したいと考えています。高さは、これら 2 つのスライダーの値を乗算した結果になります。コードを手伝ってください。ありがとう

Answer 1

HTML:

<div id='flexible' style='width:200px; height:100px; background-color:green'></div>

<div id='steps' class='ui-slider-1' style="margin:10px;">
<div class='ui-slider-handle'></div>    
</div>

<div id='height-of-step' class='ui-slider-1' style="margin:10px;">
<div class='ui-slider-handle'></div>    
</div>

JS:

$('#steps').slider( { slide: moveStepsSlider } );
$('#height-of-step').slider( {slide: moveHeightSlider} );

function moveStepsSlider( e, ui ) 
{
    $('#flexible').height(ui.value * $('#height-of-step').slider("option", "value") );
}

function moveHeightSlider( e, ui ) 
{
   $('#flexible').height(ui.value * $('#steps').slider("option", "value") );
}