JSFiddle - React, Tailwind, and code Playground

by skippy82

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">
                    <li><span>OSM</span></li>
<div id="slider-osm" class='slider' value='OSM'>
<div id="square-osm" class="ui-slider-handle"></div>
</div>
<li><span> ArcGIS</span></li>
 <div id="slider-arcgis" class='slider'>  <div id="square-arcgis" 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'
      });
      
      map.addLayer(couche_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
    });
      
      map.addLayer(couche_arcgiswdimg);
      
      var layers_group = new ol.layer.Group({
      	name:"couches",
        layers:[couche_arcgiswdimg, couche_osm],
      
      })
      
      map.addLayer(layers_group);
      
   var idsquare = $("div.ui-slider-handle");

		var valueslider = $('div.slider').attr('value');
		    layers_group.getLayers().forEach(function(element, index, array){
        		var idcouche = element.get('title');
			if(valueslider===idcouche){
            $('div.slider').slider({
            	value:100,
            	min:0,
              max:100,
   create: function() {
        idsquare.text( $( this ).slider( "value" ) );
      },
              slide:function(event, ui){
                              idsquare.text(ui.value);

              		element.setOpacity(ui.value/100)
              }
            
            })
            
            
      }});
/*

$(".slider").on("change", function(){
		var idslider = $(this).attr('value');
		    layers_group.getLayers().forEach(function(element, index, array){
        		var idcouche = element.get('title');

            
             if(idslider===idcouche){
             			$(".slider").slider({
                  	value:100,
                   ...