i am using this plugin https://github.com/dwilhelm89/LeafletSlider, i am trying create 2 slider control and combine them but don't know how can i do. Thank you for reading my question and sorry because my english is bad.
Here my code slider control:
$.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 result: My img
Only show one slider control.
This plugin is not good coded ...
When you look in the code, you see that it creates a div with a id and selecting the container by id. So when you add a second slider, it becomes also the same id, but when you call .startSlider() on the second slider, it selects by id and get only the first slider.
I recommand you to overwrite the plugin.
