React Js Change Image Size with Slider

<!DOCTYPE html>
<html>

<body>
    <div id="app"></div>
    <script type="text/babel">
        const { useState } = React;

function App() {
            const [rangeSliderValue, setRangeSliderValue] = useState(50);

const handleRangeSliderChange = (e) => {
                setRangeSliderValue(e.target.value);
            };

return (
                <div className='container'>
                    <h3>React Js Change image size with input range slider</h3>
                    <p>{rangeSliderValue}%</p>
                    <div className="slide-container">
                        <input
                            type="range"
                            min="1"
                            max="100"
                            value={rangeSliderValue}
                            onChange={handleRangeSliderChange}
                            className="slider"
                        />
                    </div>
                    <div className="img-container">
                        <img
                            src="https://www.sarkarinaukriexams.com/images/editor/1670265927Capture123243243423.PNG"
                            style={{
                                width: `${rangeSliderValue}%`,
                                borderRadius: '10px',
                            }}
                        />
                    </div>
                </div>
            );
        }

ReactDOM.render(<App />, document.getElementById("app"));
    </script>
    <style>
        .container {
            text-align: center;
            margin: 0 auto;
            width: 700px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

h3 {
            font-size: 24px;
            margin-bottom: 10px;
        }

.slide-container {
            margin-bottom: 20px;
        }

.slider {
            width: 100%;
            height: 8px;
            -webkit-appearance: none;
            background-color: #ccc;
            border-radius: 5px;
            outline: none;
            opacity: 0.7;
            -webkit-transition: .2s;
            transition: opacity .2s;
        }

.slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: #4CAF50;
            cursor: pointer;
        }

.slider::-moz-range-thumb {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background-color: #4CAF50;
            cursor: pointer;
        }

.img-container {
            margin-top: 20px;
        }

.img-container img {
            max-width: 100%;
            height: auto;
            border-radius: 10px;
        }
    </style>
</body>

</html>