change width element with input type range

change width element with input type range

by Adi Jaya

HTML

<div id="container">
  <span id="num"></span>
</div>

<p>
<span id="wraper_input">
  <input id="control" type="range" value="80" min="10" step="5" max="100"/>
</span>  
</p>

CSS

body {
  font-family : arial;
}

#container {
  width : 80%;
  height : 150px;
  margin :0 auto;
  background : red;
}

#num {
  color :white;
}
#control{
  cursor : pointer;
}

JavaScript

//jquery code
$('#wraper_input').on('input','#control',function() {		
	$('#container').css({'width':$(this).val()+'%'});
	$('#num').html($(this).val()+'%');
});