LeafletSlider icon indicating copy to clipboard operation
LeafletSlider copied to clipboard

Slider and checkbox: when using the checkbox, the slider doesn't work anymore

Open lonne12 opened this issue 4 years ago • 1 comments

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: grafik

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();	  
	};

};	

lonne12 avatar Apr 02 '20 13:04 lonne12

Should be fixed in https://github.com/Falke-Design/LeafletSlider

Falke-Design avatar Apr 16 '20 19:04 Falke-Design