> For the complete documentation index, see [llms.txt](https://docs.mapbox.com/mapbox-gl-js/llms.txt) # Adjust a layer's opacity Drag the range slider to adjust the opacity of a [raster layer](https://docs.mapbox.com/style-spec/reference/layers/#raster) on top of a map. > Example code: **JavaScript** ```html Adjust a layer's opacity
``` **React** ```jsx import React, { useEffect, useRef, useState } from 'react'; import * as mapboxgl from 'mapbox-gl/esm'; import 'mapbox-gl/dist/mapbox-gl.css'; const MapboxExample = () => { const mapContainerRef = useRef(); const mapRef = useRef(); const [sliderValue, setSliderValue] = useState(100); const handleChange = (e) => { mapRef.current.setPaintProperty( 'chicago', 'raster-opacity', parseInt(e.target.value, 10) / 100 ); setSliderValue(e.target.value); }; useEffect(() => { mapRef.current = new mapboxgl.Map({ // TO MAKE THE MAP APPEAR YOU MUST // ADD YOUR ACCESS TOKEN FROM // https://account.mapbox.com accessToken: 'YOUR_MAPBOX_ACCESS_TOKEN', container: mapContainerRef.current, style: 'mapbox://styles/mapbox/standard', config: { basemap: { theme: 'monochrome' } }, center: [-87.6321, 41.8362], minZoom: 9.5, maxZoom: 13, zoom: 9.5 }); mapRef.current.on('load', () => { mapRef.current.addSource('chicago', { type: 'raster', url: 'mapbox://mapbox.u8yyzaor' }); mapRef.current.addLayer({ id: 'chicago', source: 'chicago', type: 'raster' }); }); }, []); return (
); }; export default MapboxExample; ```