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>
Latest Current Affairs 2024 Online Exam Quiz for One day Exam Online Typing Test CCC Online Test Python Programming Tutorials Best Computer Training Institute in Prayagraj (Allahabad) 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