<p>元素遵循范围<input /> </p>

Question

我制作了一张比较地图using mapbox.js。

特别之处在于我使用范围输入来显示或隐藏两个图层。我还在我的地图上面放了两段元素，基本上介绍了每一层的参考年份。

我想做的事情似乎很简单，但我没有做到。我希望段落元素在加载后严格遵循范围。例如，如果我将范围放在地图的右侧，我会得到＆＃34; 2014＆＃34;文字完全隐藏。

有人知道这是否可行？

这是HTML画布：

  <p style="font-family:Arial; font-size:2.4em; position:absolute; top:-30px; font-weight:bold; margin-left:75px; color:#cbcfcf;  -webkit-text-stroke: 0.5px black">2008</p>

 <p style="font-family:Arial; font-size:2.4em; position:absolute; top:-30px; font-weight:bold; margin-left:335px; color:#f3f4f4;  -webkit-text-stroke: 0.5px black">2014</p>

<div id='map'>
  <input id="range" type="range" min="0" max="1.0" step="any" />
</div>

这是Javascript：

// I start with all my variables
var map = L.mapbox.map('map', '',{zoomControl: false});

var myGridLayer = L.mapbox.gridLayer('raphadasilva.6401kyb9').addTo(map);

var myGridControl = L.mapbox.gridControl(myGridLayer).addTo(map);

L.mapbox.tileLayer('raphadasilva.e77ousor').addTo(map);

var overlay = L.mapbox.tileLayer('raphadasilva.0ri9t3xr').addTo(map);

var range = document.getElementById('range');

// here's the important function to show or hide a layer :

function clip() {
    var nw = map.containerPointToLayerPoint([0, 0]),
        se = map.containerPointToLayerPoint(map.getSize()),
        clipX = nw.x + (se.x - nw.x) * range.value;

    overlay.getContainer().style.clip = 'rect(' + [nw.y, clipX, se.y, nw.x].join('px,') + 'px)';
}

range['oninput' in range ? 'oninput' : 'onchange'] = clip;
map.on('move', clip);