JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/build/ol.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.4.3/css/ol.css">
<div id="admin" class="collapse">
                   
                    <select onchange="selectChange();" id="selectLayer">
                
                    </select>
<div id="slider-osm" class='slider'>
<div id="square-osm" class="ui-slider-handle"></div>
</div>
</div>
               
            
                
                <div id="map">
                
                </div>

CSS

#map{
    height: 100%;
    width: 100%;
    left: 0px;
    position: absolute;
    margin-top: 15px;
            
    }
    
        /* sliders panel baselayers */
      #slider-osm, #slider-arcgis{
height: 8px;
    border: 1px solid black;
    width: 100%;
    margin-top: 6px;
  }
    
    #square-osm, #square-arcgis {
    width: 2em;
    height: 1.6em;
    top: 50%;
    margin-top: -0.8em;
    text-align: center;
    line-height: 1.6em;
        font-size: 13px;
        border: 1px solid black;
  }

JavaScript

var map = new ol.Map({
        target: 'map',

        view: new ol.View({
          center: ol.proj.fromLonLat([37.41, 8.82]),
          zoom: 4
        })
      });
      
      var couche_osm = new ol.layer.Tile({
            source: new ol.source.OSM(),
            title:'OSM'
      });
      

      
       var arcgiswdimg = new ol.source.XYZ({
        url:"https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"
    });
    
    var couche_arcgiswdimg = new ol.layer.Tile({
       id:"arcgiswdimg",
        extent: [-20026376,-20048966,20026376,20048966],
        source : arcgiswdimg,
        type:'base',
        title:'ArcGIS World Imagery',
        visible:true
    });
      


   var layers_group = new ol.layer.Group({
      	name:"couches",
        layers:[couche_arcgiswdimg, couche_osm],
      
      })
      
      map.addLayer(layers_group);
      
    
      
      ///
      x = layers_group.getLayers();
       var idCouche = null;
      x.forEach(function (layer){
      var title = layer.values_.title;
     if(!idCouche){
     	idCouche = title;
     }
      if(layer.values_.title){
      document.getElementById("selectLayer").innerHTML += "<option value='"+title+"'>"+title+"</option>";
      }
      });
      
      //
     
      function selectChange(){
      var select = document.getElementById("selectLayer");
      idCouche = select.value;
       layers_group.getLayers().forEach(function(element, index, array){
       	if(element.get('title') === idCouche){
          idsquare.text( element.getOpacity()*100 );
        }});
     
      }


    
      
      //map.layer.forEach(function (layer){
     //console.log(layer);
    //  });
   var idsquare = $("div.ui-slider-handle");

	
      
      		var valueslider = $('div.slider').attr('value');
		  

            $('div.slider').slider({
            	value:100,
            	min:0,
              max:100,
   create: function() {
        idsquare.text( $( this...