Programming Examples

Angular JS program to change the size of circle using range bar


change the size of circle

Write Angular JS program to change the size of circle using input type range

Solution

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<style>
	.circle
	{
		width:300px;
		height:300px;
		background:red;
		border-radius:50%;
	}
</style>
<body>
<div ng-app="">
	100<input type="range"  min="100" max="500" step="50" ng-model="size"/>{{size}}<br/>
	<br/>
	<br/>
	<div class="circle" style="width:{{size}}px;height:{{size}}px"></<div>
</div>

</body>
</html>
CCC Online Test Python Programming Tutorials Best Computer Training Institute in Prayagraj (Allahabad) Online Exam Quiz O Level NIELIT Study material and Quiz Bank SSC Railway TET UPTET Question Bank career counselling in allahabad Best Website and Software Company in Allahabad Website development Company in Allahabad