Unable to use range slider wth text in jquery-CodePudding

I am working with jquery and i want whenever we increase/decrease "slider range" then "text" should increase/decrease according to selection,How can we do this ? I tried with following code but not working for me,Thank you in advance.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$('input').on('input', e => $('p').css('font-size', $(e.target).val()   'em'));
</script>
<input type="range" value="1.2" min="1.2" max="2.6" step=".0002" id="slider" />
<p>Some text that should dynamically change size.</p>

CodePudding user response：

You should move your script under input like this one

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="range" value="1.2" min="1.2" max="2.6" step=".0002" id="slider" />
<p>Some text that should dynamically change size.</p>

<script>
$('input').on('input', e => $('p').css('font-size', $(e.target).val()   'em'));
</script>