jquery - 两个滑块控制一个值

Question

使用两个 jquery 滑块“steps”和“height-of-a-step”我想控制“div”的高度。高度应该是这两个滑块值相乘的结果。请帮我写代码。谢谢

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

我使用了宽度而不是高度，因此在这个简单的演示中它不会移动滑块。

我正在使用内置的范围输入，请注意它在旧浏览器中的支持，并且莫名其妙地，Firefox 版本小于 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") );
}