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>
Online Exam Quiz for One day Exam Online Typing Test CCC Online Test 2026 Best Computer Training Institute in Prayagraj (Allahabad) Best Java Training Institute in Prayagraj (Allahabad) Best Python Training Institute in Prayagraj (Allahabad) O Level Online Test in Hindi Best Website and Software Company in Allahabad