传单多个滑块

Question

我正在使用这个插件 https://github.com/dwilhelm89/LeafletSlider，我正在尝试创建 2 个滑块控件并将它们组合起来，但我不知道该怎么做。感谢您阅读我的问题，对不起，因为我的英语不好。

这里是我的滑块控件代码：

$.getJSON("{% url 'hostel' %}", function (json) {

            hostel_datasets.addData(json);

            //For a Range-Slider use the range property:
            sliderControl = L.control.sliderControl({
                    position: "topright",
                    layer: hostel_datasets, 
                    timeAttribute: "price",
                    //isEpoch: true,
                    showAllOnStart: true,
                    range: true
            });

            slider_date = L.control.sliderControl({
                    position: "topright",
                    layer: hostel_datasets, 
                    timeAttribute: "updated_at",
                    //isEpoch: true,
                    showAllOnStart: true,
                    range: true
            });

            //Make sure to add the slider to the map ;-)
            map.addControl(sliderControl);
            map.addControl(slider_date);

            sliderControl.options.markers.sort(function(a, b) {
                return (a.feature.properties.price > b.feature.properties.price);
            });

            //And initialize the slider
            sliderControl.startSlider();
            slider_date.startSlider();

            var htmlObject = sliderControl.getContainer();
            var a = document.getElementById('form4');
            function setParent(el, newParent)
            {
                newParent.appendChild(el);
            }
            setParent(htmlObject, a);
        });

我的结果： My img

只显示一个滑块控件。

Answer 1

这个插件编码不好...

当您查看代码时，您会发现它创建了一个带有 id 的 div 并通过 ID 选择容器。因此，当您添加第二个滑块时，它也变成相同的 ID，但是当您在第二个滑块上调用 .startSlider() 时，它会按 ID 选择并仅获得第一个滑块。

https://github.com/dwilhelm89/LeafletSlider/blob/a797b08d692b9c9deaf5602ebeb99923d8764f5e/SliderControl.js#L106

我建议你覆盖插件。

传单多个滑块

Leaflet multiple slider

slider

geojson

leaflet