Extending the part how ACF is updating the block preview to provide a better user experience

Hey @lgladdy @polevaultweb,

I've long noticed that I can't see block changes while making changes to a range field type.

However, the user is used to seeing changes immediately when changing field values. So I have the following suggestion for improvement.

ACF is currently updating the block preview in the BlockForm class in this way:

$el.on('change keyup', () => {
    clearTimeout(timeout);
    timeout = setTimeout(serializeData, 300);
});

If we could extend this part by an input event, field changes are visible while we changing a value on a range field type:

$el.on('input', (e) => {
    const fieldType = $(e.target).attr('type');
    if( fieldType === 'range' ) {
        clearTimeout(timeout);
        timeout = setTimeout(serializeData, 100);
    }  
});
$el.on('change keyup', () => {
    clearTimeout(timeout);
    timeout = setTimeout(serializeData, 300);
});

Before:

After:

It could also make sense for other field types such as number.

Start by locating the BlockForm class and its existing change and keyup handlers. Check how block preview serialization is triggered, then verify that range input changes update the preview during interaction; consider whether number fields should behave similarly. Done means the preview responds while changing the supported field value without breaking the existing update behavior.