This tutorial is a proof of concept to use an HTML5 slider to control the opacity of a Leaflet map layer. If you want more information about setting up Leaflet and adding different layers, read the documentation.

We will start by adding two layers:

map.addLayer(stamen);
map.addLayer(mapquest);

And a slider:

<input id="slide" type="range" min="0" max="1" step="0.1" value="0.5" onchange="updateOpacity(this.value)">

The slider will invoke the function updateOpacity  when it is moved, which sets the opacity of the layer:

function updateOpacity(value) {
    mapquest.setOpacity(value);
}


If we want to change the opacity of the stamen layer, that’s possible too:

function updateOpacity(value) {
    stamen.setOpacity(value);
}

The code for the above example is here.