Is there a way to change the scale of a feature after it has been placed in opnelayers 7?

Is there a way to update the scale of an icon being placed on an openlayers map after it’s been placed there?

I have map with a marker icon on it. I’d like the user to be able to make the icon larger/smaller using a slider.

I’ve been trying to figure it out using getStyle or setStyle but can’t seem to get the scale to change.

Thanks!

var london = [-0.1276474, 51.507321899999994];
var isOnMap = true;  

    const baseMapTile = new ol.layer.Tile({
            source: new ol.source.OSM(),
            visible: true,
            title: 'OSMStandard'
    });
    
    
    const marker = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat(london)),
        name: 'Somewhere near Nottingham',
    });
    
    
    const map = new ol.Map({
    view: new ol.View({
            
      center: (ol.proj.fromLonLat(london)),
      zoom: 15,
    }),
        layers: [
            baseMapTile,
            new ol.layer.Vector({
                source: new ol.source.Vector({
                    features: [marker]
                }),
                style: new ol.style.Style({
                    image: new ol.style.Icon({
                        anchor: [0.5, 1],
                        scale: 1,
                        src: 'https://openlayers.org/en/latest/examples/data/icon.png'
                    })
                })
            })
        ],
    target: 'map'
    
  });

var translate = new ol.interaction.Translate({
    features: new ol.Collection([marker])
});

map.addInteraction(translate);

document.getElementById('markerSlider').oninput = function() {
    newScale = document.getElementById('markerSlider').value / 100;
  console.log(newScale);
    document.getElementById('newScale').innerHTML = newScale;
}


/*
translate.on('translating', function (evt) {});
map.getView().on(['change:center', 'change:resolution', 'change:rotation'], function() {});
*/

#map{
    width: 300px;
    height: 300px;
    border: 1px solid black;
    padding: 5px;
    float: left;

}
#info{
width: calc(100% - 330px);
margin-left: 5px;
padding: 5px;
height: 100px;
    border: 1px solid black;
    float: left;
}
.info h2{
    font-size: small;
    text-decoration: underline;
    font-weight: 600;
    margin: 0 0 10px 0;
}
#newScale{
    font-size: larger;
    margin: 5px 0 0 15px;;
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/ol.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ol.js"></script>
<div id="map" class="map"></div>    
<div id="info" class="info">
    <h2>Change Marker Size</h2>
    <input type='range' min='50' max='150' value='100' class='markerSlider' id='markerSlider'><br>
    <span id='newScale'>1</span>
</div>