Vue Js Change image size with input range slider

<!DOCTYPE html>
<html>
<head>
	<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
	<h3>Vue Js Change image size with input range slider</h3>
	<div id="app">
		<p>{{ rangeSliderValue }}%</p>
		<div class="slide-container">
			<input type="range" min="1" max="100" v-model="rangeSliderValue" class="slider" />
		</div>
		<div class="img-container">
			<img src="https://www.sarkarinaukriexams.com/images/editor/1670265927Capture123243243423.PNG" :style="{
          width: `${rangeSliderValue}%`,
          borderRadius: '10px',
        }" />
		</div>
	</div>
	<script type="module">
		const app = Vue.createApp({
			data() {
				return {
					rangeSliderValue: 50,
				}
			},
		});
		app.mount('#app');
	</script>
	<style>
		#app {
			font-family: Avenir, Helvetica, Arial, sans-serif;
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			text-align: center;
			color: #2c3e50;
			margin-top: 60px;
		}

.slide-container {
			width: 300px;
			margin: 0 auto;
		}

.img-container {
			max-width: 600px;
			margin: 0 auto;
		}

input[type="range"] {
			-webkit-appearance: none;
			width: 100%;
			height: 15px;
			background: #ddd;
			border-radius: 5px;
			outline: none;
			opacity: 0.7;
			-webkit-transition: .2s;
			transition: opacity .2s;
		}
       input[type="range"]:hover {
			opacity: 1;
		}
      input[type="range"]::-webkit-slider-thumb {
			-webkit-appearance: none;
			appearance: none;
			width: 20px;
			height: 20px;
			background: #4CAF50;
			border-radius: 50%;
			cursor: pointer;
		}

input[type="range"]::-moz-range-thumb {
			width: 20px;
			height: 20px;
			background: #4CAF50;
			border-radius: 50%;
			cursor: pointer;
		}
	</style>
</body>

</html>