兩個滑塊controling一個價值

Question

使用兩個jQuery的滑塊「臺階」和。高度應該是這兩個滑塊值相乘的結果。請幫我看看代碼。由於

Answer 1

我剛剛颳起了：

http://jsfiddle.net/richbradshaw/KKhYU/4/

相當自我解釋，使用jQuery我們可以使用：

$(function() { 
    // cache things we'll need many times. 
    var $box = $("#box"), 
    $step = $("#step"), 
    $height-of-step = $("#height-of-step"); 

    $('input').on('change', function() { 
     // set the width of box to the product of the two things. 
     $box.css('height', $step.val() * $height-of-step.val()); 
    }); 
}); 

我用的寬度，而不是高度，使之不移動這個簡單演示中的滑塊。我使用的是內置的範圍內輸入

，在老的瀏覽器意識到它的支持和莫名，火狐版本低於23（只用了7年後的第一個建議實行...）。 http://caniuse.com/#feat=input-range

Answer 2

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