Increase css width in percent with slide ui

Question

I'm looking to increase the width of a div using Jquery and it's ui slide function. I'd like this to be done by using the handler.

The div's width and height are initially set in percent and I'd like to increase width by 5% on each slide step.

This is what I currently have. If I set the css within the function to be just 10, instead of '10%' the slide works but uses pixels instead of percent. How can I achieve this same effect using percent.

HTML

 <div id="slider"></div>
    <div id="boxout">
       <div id="box"></div>
    </div>

CSS

 #slider {
width: 200px;
margin: 50px auto;
}

#boxout {

  width: 200px;
  height: 200px;
  margin: 0 auto;
}

#box {

  width: 10%;
  height: 10%;
  background: red;
}

JQUERY

$(function() {
    $("#slider").slider({    
        min:0, max: 5,
        slide: function(event,ui){
            $("#box").css('width','10%'*(1+(ui.value)));

        },
    });
});

Here's the fiddle: http://jsfiddle.net/yq3ocs47/

Many thanks

Answer 1

You are trying to multiply a string with a number. You just need to adjust that line:

$("#box").css('width', 10*(1+(ui.value)) + "%");

Answer 2

$(function() {
    $("#slider").slider({    
        min:0, max: 20,
        slide: function(event,ui){
            $("#box").css('width',(ui.value*5) + '%');
        },
    });
});

I guess this is what you wanted, basically if you want it to grow 5% you need to have 20 steps . 100/20 = 5

So you take the ui.value and time it by 5 , so you have [0,5,10,20,25,30,35,40,45,50,55,60,65,70,75,80,85,90,95,100]