LeafletSlider
LeafletSlider copied to clipboard
Slider and checkbox: when using the checkbox, the slider doesn't work anymore
We connected the slider with a checkbox in a navbar for an interactive web map. The default is an unchecked box. When checking the box for the first time everything works fine. If we then uncheck the box and check it again, you can only move the slider once and then it is stuck. Then there is no interaction possible at all. But we do not get an error message. The slider is connected to a geojson file. Do we have to update the slider or anything like that?
What happens:
The code for the navbar:
<div class="navbar">
<div class="navbar-header">
<a class="navbar-brand" ><i class="fas fa-suitcase"></i> Planer</a>
</div>
<div class="navbar-content">
<div class="dropdown">
<button class="dropbtn">History <i class="fa fa-caret-down"></i></button>
<div class="dropdown-content">
<a>
<label class="switch">
<input type="checkbox" onclick="sliderOn()" id="sliderBox" autocomplete="off">
</label>Hotels <i class="fa fa-bed"></i></a>
</div>
</div>
</div>
</div>
JS-code:
var sliderControl = L.control.sliderControl({layer:hotel, follow: false, range: true});
function sliderOn(){
var checkbox = document.getElementById('sliderBox');
if (checkbox.checked == true){
map.addControl(sliderControl);
sliderControl.startSlider();
} else {
sliderControl.remove();
};
};
Should be fixed in https://github.com/Falke-Design/LeafletSlider