You mixed a few things here. kml is XML object, not a Leaflet layer, so you cannot set opacity to it with setOpacity function or add it to the map.
Leaflet layer that comes from kml and you are interested in is track. This is feature group layer for which you can set style with setStyle method. You have to declare it outside fetch, so it be available later to change it's opacity with slider.
Your code could then look something like this:
var track;
var kml = fetch('Coventry.kml')
.then( res => res.text() )
.then( kmltext => {
parser = new DOMParser();
kml = parser.parseFromString(kmltext,"text/xml");
track = new L.KML(kml);
map.addLayer(track);
const bounds = track.getBounds();
map.fitBounds(bounds);
});
$('#sldOpacity').on('change', function(){
$('#image-opacity').html(this.value);
track.setStyle({opacity: this.value, fillOpacity: this.value});
});
EDIT: In your JSFiddle code you are using JQuery without link to library and you are using slider code without required HTML elements. Here is working JSFiddle (KML is defined in code): https://jsfiddle.net/TomazicM/7nxfgtu8/
Here is the main part of the code:
<body>
<div id="mapid"></div>
<div>
<span id="image-opacity">0.5</span>
<input type="range" id="sldOpacity" min="0" max="1" step="0.1" value="0.5" />
</div>
<script>
var myKML = '<?xml version="1.0" encoding="UTF-8"?>' +
'<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom"> ' +
'<Document> ' +
'<name>polygon.kml</name> ' +
'<Style id="transYellowPoly"> ' +
'<LineStyle> ' +
'<width>1.5</width> ' +
'</LineStyle> ' +
'<PolyStyle> ' +
'<color>7d00ffff</color> ' +
'</PolyStyle> ' +
'</Style> ' +
'<Placemark> ' +
'<name>Building 43</name> ' +
'<visibility>0</visibility> ' +
'<styleUrl>#transYellowPoly</styleUrl> ' +
'<Polygon> ' +
'<extrude>1</extrude> ' +
'<altitudeMode>relativeToGround</altitudeMode> ' +
'<outerBoundaryIs> ' +
'<LinearRing> ' +
'<coordinates> -122.0844371128284,37.42177253003091,19 ' +
'-122.0845118855746,37.42191111542896,19 ' +
'-122.0850470999805,37.42178755121535,19 ' +
'-122.0850719913391,37.42143663023161,19 ' +
'-122.084916406232,37.42137237822116,19 ' +
'-122.0842193868167,37.42137237801626,19 ' +
'-122.08421938659,37.42147617161496,19 ' +
'-122.0838086419991,37.4214613409357,19 ' +
'-122.0837899728564,37.42131306410796,19 ' +
'-122.0832796534698,37.42129328840593,19 ' +
'-122.0832609819207,37.42139213944298,19 ' +
'-122.0829373621737,37.42137236399876,19 ' +
'-122.0829062425667,37.42151569778871,19 ' +
'-122.0828502269665,37.42176282576465,19 ' +
'-122.0829435788635,37.42176776969635,19 ' +
'-122.083217411188,37.42179248552686,19 ' +
'-122.0835970430103,37.4217480074456,19 ' +
'-122.0839455556771,37.42169364237603,19 ' +
'-122.0840077894637,37.42176283815853,19 ' +
'-122.084113587521,37.42174801104392,19 ' +
'-122.0840762473784,37.42171341292375,19 ' +
'-122.0841447047739,37.42167881534569,19 ' +
'-122.084144704223,37.42181720660197,19 ' +
'-122.0842503333074,37.4218170700446,19 ' +
'-122.0844371128284,37.42177253003091,19 </coordinates> ' +
'</LinearRing> ' +
'</outerBoundaryIs> ' +
'</Polygon> ' +
'</Placemark> ' +
'</Document> ' +
'</kml>';
var map = L.map('mapid').setView([37.42222, -122.08395], 14);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 21,
id: 'mapbox.streets',
accessToken: 'pk.eyJ1Ijoia3J1a2FyaXVzIiwiYSI6ImNqZ2tuaHZqODAxMjYzM28yam40MmpxMmEifQ.3chgJkJajjDBxsF4YHgENA'
}).addTo(map);
parser = new DOMParser();
kml = parser.parseFromString(myKML,"text/xml");
track = new L.KML(kml);
map.addLayer(track);
const bounds = track.getBounds();
map.fitBounds(bounds);
sldOpacity.onchange = function() {
document.getElementById('image-opacity').innerHTML = this.value;
track.setStyle({fillOpacity: this.value});
};
</script>
</body>
Remark: If you just copy code from various sources without understanding what it does you'll be in trouble all the time.
