<div class="container">
    <svg width="400" height="100" viewPort="0 0 400 400" version="1.1" xmlns="http://www.w3.org/2000/svg">
        <line  class="line1" x1="10" y1="10" x2="390" y2="10" />
        <line  class="line2" x1="10" y1="40" x2="390" y2="40" />
    </svg>
	 <div>
	 
	 <p>stroke-dasharray <input class="range1" type="range" min="0" max="500" value="0"/></p>
	 <p>stroke-dashoffset <input class="range2" type="range" min="0" max="500" value="400"/></p>
	 </div>
</div>
.container {
    width:400px;
    margin: 20px auto;
}
.line1,.line2 { stroke: #f70; stroke-width:5;}
.line1 { stroke-dashoffset: 0; stroke-dasharray:0,1000;} 
.line2 {stroke-dasharray:400; stroke-dashoffset: 400; } 
$('.range1').on('input', function(){
	var v =$(this).val();
	$('.line1').css('stroke-dasharray', v+', 1000' );
})
$('.range2').on('input', function(){
	var v =$(this).val();
	$('.line2').css('stroke-dashoffset', v );
})
Rerun