I want to change value and dispatch the event. what is the best way to do it with human like interaction with js. for example i want the value to 50
<input autocomplete="off" type="hidden" value="12.024432809773119" name="design[mockup_config_pin_attributes][position_top]" id="design_mockup_config_pin_attributes_position_top">

code for refrence we want it for pin
<div class="canvas-container x pin current-canvas" data-activecanvas="true" data-canvas="pin" data-canvas_id="20">
<div class="editor-container pin">
<input autocomplete="off" type="hidden" value="12.024432809773119" name="design[mockup_config_pin_attributes][position_top]" id="design_mockup_config_pin_attributes_position_top">
<input autocomplete="off" type="hidden" value="10" name="design[mockup_config_pin_attributes][position_left]" id="design_mockup_config_pin_attributes_position_left">
<div class="mockup-container active">
<div class="mockup-display-preview">
<div class="mockup-boundaries pin" style="background-color: rgb(0, 0, 0);">
<img class="mutable-preview ui-draggable ui-draggable-handle" src="https://res.cloudinary.com/teepublic/image/private/s--4DbpLzzv--/l_text:helvetica_16_bold:134de18e2ab48975a040d1a7b6fd7b0f19ccead7,o_0/c_fit,f_png,h_500,q_90,w_500/v1728384190/production/designs/67023659_0.png" style="width: 324.32px; height: 307.906px; top: 48.7471px; left: 40.54px;">
<div class="m-uploader_center-axis vertical"></div>
<div class="m-uploader_center-axis horizontal"></div>
</div>
</div>
</div>
<div class="m-uploader-toolbar jsUploaderPinToolbar">
<div class="m-uploader-toolbar_tools">
<div class="m-uploader-toolbar_label">
Tools
</div>
<div class="m-uploader-toolbar_color-selector">
<div class="minicolors minicolors-theme-default minicolors-position-bottom minicolors-position-left"><input class="jsUploaderPinColor jsUploaderColor minicolors-input" type="text" value="" name="design[mockup_config_pin_attributes][bg_color]" id="design_mockup_config_pin_attributes_bg_color" size="7"><span class="minicolors-swatch minicolors-sprite minicolors-input-swatch"><span class="minicolors-swatch-color" style="background-color: rgb(0, 0, 0);"></span></span><div class="minicolors-panel minicolors-slider-hue"><div class="minicolors-slider minicolors-sprite"><div class="minicolors-picker" style="top: 0px;"></div></div><div class="minicolors-opacity-slider minicolors-sprite"><div class="minicolors-picker"></div></div><div class="minicolors-grid minicolors-sprite" style="background-color: rgb(255, 0, 0);"><div class="minicolors-grid-inner"></div><div class="minicolors-picker" style="top: 150px; left: 0px;"><div></div></div></div></div></div>
</div>
<div class="m-uploader-toolbar_tool m-uploader-toolbar_tool-dropper jsOpenColorDropper" data-label="Pins" data-selector="#design_mockup_config_pin_attributes_bg_color" title="Color Dropper"></div>
<div class="m-uploader-toolbar_tool m-uploader-toolbar_tool-h-align jsUploaderPinHAlign" title="Center Horizontally"></div>
<div class="m-uploader-toolbar_tool m-uploader-toolbar_tool-v-align jsUploaderPinVAlign" title="Center Vertically"></div>
</div>
<div class="m-uploader-toolbar_scaler">
<div class="m-uploader-toolbar_label">
Scale
</div>
<div class="m-uploader-toolbar_scaler-input">
<input min="1" max="200" step="1" class="jsUploaderPinScaler" type="range" value="80.0" name="design[mockup_config_pin_attributes][image_size]" id="design_mockup_config_pin_attributes_image_size">
</div>
<div class="m-uploader-toolbar_scaler-label jsUploaderPinScalerLabel">80%</div>
</div>
</div>
</div>
<div class="toolbar">
<div class="right-col">
<div class="m-uploader_grey-box">
<h2>
Pins
</h2>
<div>
Position and size your design on the pin preview. Be sure to pick a background color!
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>