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

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>

Output

Live Output:

https://programmingtrick.com/angular-assignment/assign5.html

Programming Examples

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