<main></main>input[type="range"] {
display: block;
}
svg {
background: white;
border: 1px solid black;;
}
circle {
fill: red;
}const { useState } = React;
function App(props) {
const [size, setSize] = useState(30);
return (
<div>
<input type="range" value={size} onChange={(e) => setSize(e.target.value)} />
<svg>
<circle cx="150" cy="75" r={size} />
</svg>
</div>
)
}
ReactDOM.render(<App />, document.querySelector('main'));
External CSS
This Pen doesn't use any external CSS resources.