Javascript 如何获取传单滑块的起点和终点

我有一个带有范围的传单滑块，我想有两个元素来保持每个手柄的开始和结束日期，就像，任何想法如何做到这一点。 这就是我试图修改SliderJavaScript文件的方式

L.Control.SliderControl=L.Control.extend({
选项：{
位置：'topright'，
图层：空，
timeAttribute:'时间'，
isEpoch:false，//时间属性是否为从历元开始经过的秒数
startTimeIdx:0，//从何处开始查找时间字符串
timeStrLength:19，//yyyy-mm-dd的大小hh:mm:ss-如果存在毫秒，则会更大
最大值：-1，
最小值：0，
showAllOnStart:false，
标记：空，
范围：false，
下面是：错，
alwaysShowDate:错误，
重新缩放：空
},
初始化：函数（选项）{
L.Util.setOptions（本，选项）；
this.\u layer=this.options.layer；
},
extractTimestamp：函数（时间、选项）{
if（options.isEpoch）{
time=（新日期（parseInt（time）））.toString（）；//这是本地时间
}
返回时间.substr（options.startTimeIdx，options.startTimeIdx+options.timeStrLength）；
},
设置位置：功能（位置）{
var map=此。_map；
如果（地图）{
地图移除控制（本）；
}
this.options.position=位置；
如果（地图）{
map.addControl（this）；
}
this.startSlider（）；
归还这个；
},
onAdd：函数（映射）{
this.options.map=map；
//使用jquery ui滑块创建控件滑块容器
var sliderContainer=L.domautil.create（'div'，'slider'，this.\u容器）；
$（sliderContainer）.append（“”）；
//使用滑块时防止地图平移/缩放
$（sliderContainer）.mousedown（函数（）{
map.draging.disable（）；
});
$（文档）.mouseup（函数（）{
map.draging.enable（）；
//如果不在范围内，则隐藏滑块时间戳，并且选项alwaysShowDate设置为false
如果（options.range | |！options.alwaysShowDate）{
$（'#滑块时间戳'）.html（''）；
}
});
var options=this.options；
this.options.markers=[]；
//如果已提供图层：计算滑块的最小值和最大值
如果（该层）{
var指数=0；
此层。每个层（函数（层）{
选项.标记[索引温度]=图层；
++指数温度；
});
options.maxValue=索引温度-1；
this.options=选项；
}否则{
log（“错误：您必须通过新的SliderControl（{layer:your_layer}）指定一个层；”；
}
返回滑块容器；
},
onRemove：函数（映射）{
//删除通过滑块添加的所有标记，并删除滑块div
对于（i=this.options.minValue；i例如（i=_options.minValue；i通过挖掘该示例页面的代码，可以了解他们是如何实现您所期望的效果的，因此大部分答案都是他们在那里所做工作的粗略副本

您需要做的主要事情是在sliderContainer中创建一些div，您可以在其中放置标签。如果您在创建slider div的同时这样做，它将如下所示：

$('#slider-min', sliderContainer).html(this.options.markers[this.options.minValue].feature.properties[this.options.timeAttribute]);
$('#slider-max', sliderContainer).html(this.options.markers[this.options.maxValue].feature.properties[this.options.timeAttribute]);

if (_options.range) {
    // jquery ui using range
    for (i = ui.values[0]; i <= ui.values[1]; i++) {
        if (_options.markers[i]) {
            map.addLayer(_options.markers[i]);
            fg.addLayer(_options.markers[i]);
        }
    }
    self._updateCurrentDiv(ui.values[0], ui.values[1]);
}

_updateCurrentDiv: function (startIdx, endIdx) {
this.$currentStartDiv.html(this.options.markers[startIdx].feature.properties[this.options.timeAttribute]);
        this.$currentEndDiv.html(this.options.markers[endIdx].feature.properties[this.options.timeAttribute]);
},

if (_options.range) {
    // jquery ui using range
    for (i = ui.values[0]; i <= ui.values[1]; i++) {
        if (_options.markers[i]) {
            map.addLayer(_options.markers[i]);
            fg.addLayer(_options.markers[i]);
        }
    }
    self._updateCurrentDiv(ui.values[0], ui.values[1]);
}