I am attempting to use the Slider For Bootstrap to update the opacity of a layer within Leaflet.

The slider also needs to be in a Bootstrap Popup but this part is working.

As per this JSFiddle you can see I have the slider working but I cannot get it to update/ set the opacity of the background layer, how can this be achieved?


There is a setOpacity method for TileLayer. This should do what you want:

$('#rangeSlider').slider().on('slide', function (ev) {
    sliderVal = ev.value;

EDIT: Here is an example fiddle with sliders for controlling opacity of both the background (with .setOpacity) and a vector layer (with .setStyle):


| improve this answer | |
  • Would this also work for layers that aren't tiled, for example a leaflet JSON layer? – Joshua Dickerson Oct 20 '15 at 20:31
  • There is a setStyle method for Path elements, which is inherited by all vector layers. That should work for everything except regular Markers. It would go something like myLayer.setStyle({fillOpacity : sliderVal/100}); (or {opacity : sliderVal/100}, for lines or outlines). – nathansnider Oct 20 '15 at 21:06
  • Is it possible to combine both fillOpacity and opacity into one so that the overall transparency of a polygon that has a line boundary would change at once? – Joshua Dickerson Oct 30 '15 at 17:48
  • 1
    Of course! Just set both options within the same .on('slide', ...) event handler, like myLayer.setStyle({fillOpacity : sliderVal/100, opacity : sliderVal/100}); – nathansnider Oct 30 '15 at 18:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.