CODEWITHSUNDEEP
jqueryslider
user2375727
user2375727

Reputation: 31

two sliders controling one value

Using two jquery sliders "steps" and "height-of-a-step" I want to control the height of a "div". The height should be the result of multiplications of the values of these two sliders. Please help me with the code. Thanks

Upvotes: 1

Views: 115

Answers (2)

Rich Bradshaw
Rich Bradshaw

Reputation: 72965

I just whipped up:

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

Quite self explanatory, using jQuery we could use:

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

I've used width instead of height so it doesn't move the sliders around in this simple demo.

I'm using the built in range input, be aware of its support in older browsers and inexplicably, Firefox versions less than 23 (only took 7 years to implement from first suggestion…). http://caniuse.com/#feat=input-range

Upvotes: 1

Ali B
Ali B

Reputation: 1117

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

Upvotes: 0

Related Questions