javascript - jQuery Mobile - slider cannot be moved -

i using jquery slider cannot move handle.

the html structure:

<div id="map" class="map" style="position: relative;">   <div id="legend" class="legend" style="position: absolute; top: 0px; right: 0px; width:300px; z-index: 100;">     <div style="width:290px; height: 150px; padding: 5px;">       <label class="checkbox-label"><input name="gai_max_v" id="gai_max_v" class="runoff" type="checkbox"><image src="icons/icona_land_use.png"/><p id="legend_text">soil runoff capacity (1955)</p></input></label>       <div id="div-slider">         <input type="range" name="slider-1" id="slider-1" value="80" min="20" max="100" step="20" data-highlight="true">       </div>     <div style="width:290px; height: 150px; padding: 5px;">...</div>     <div style="width:290px; height: 150px; padding: 5px;">...</div>   </div> </div> 

jquery mobile version 1.4.5 , map, content of parent div created leaflet:

var map = l.map('map', {   center: [45.81, 9.1],   zoom: 15 });  

can guess why cannot move handle?

thanks,

eylul

you can solve problem small css hack.

demo: https://jsfiddle.net/u2j24x25/2/

<!-- insert part after map -->  <div id="div-slider"><input type="range" name="slider-1" id="slider-1" value="80" min="20" max="100" step="20" data-highlight="false"></div>  /* css */ #map { height: 380px; } #div-slider {z-index:99999999;border:1px solid red;} #div-slider {position:relative;top:-250px;width:300px;float:right} 

edit: putting div#legend after div#map solve problem.

demo: https://jsfiddle.net/u2j24x25/4/

<div id="map" class="map" style="position: relative;"> </div>  <div id="legend" class="legend" style="position: absolute; top: 0px; right: 0px; width:300px; z-index: 100;">     <div style="width:290px; height: 150px; padding: 5px;">       <label class="checkbox-label">       <input name="gai_max_v" id="gai_max_v" class="runoff" type="checkbox"><image src="icons/icona_land_use.png"/><p id="legend_text">soil runoff capacity (1955)</p></input></label>       <div id="div-slider">         <input type="range" name="slider-1" id="slider-1" value="80" min="20" max="100" step="20" data-highlight="true">       </div>     <div style="width:290px; height: 150px; padding: 5px;">...</div>     <div style="width:290px; height: 150px; padding: 5px;">...</div>   </div> </div>  /* css */ #map { height: 380px; }