how to label leaflet slider

Question

i am using the leaflet slider by[dwilhelm89][1], i'm letting it slide through days( i made each day a layer and added it to the slider) but i need to add a label(timeline) so that you can see where the slider will go, any idea how to do that? thanks

   var sliderControl = L.control.sliderControl({  position: "topright",   layer: layerk,  range: true, follow:true,alwaysShowDate : true});
            
map.addControl(sliderControl);
sliderControl.startSlider();

this code is what i used to make the slider, any options or edits i can use? [1]: https://github.com/dwilhelm89/LeafletSlider

Answer 1

If you mean adding a scale with tick marks, the LeafletSlider doesn't seem to have any options for that. Though I don't have any suggestions for modifying or extending the LeafletSlider code, a couple other approaches spring to mind:

First, if you are only dealing with a few days, and you just need a few labels along the length of the slider, it may be possible to adapt one of the examples from the answers to this stackoverflow question. The top-voted answer in particular looks promising, as it is probably the simplest solution.

[EDIT: After looking into the Leaflet Slider code a bit more, I realised that it does not actually filter the data by the quantity in the time field. It simply steps from one feature to the next as you slide it (i.e. an interval of two seconds is treated the same as an interval of two years). Thus, this first method actually will not work with LeafletSlider unless the time field is monotonically increasing, or very nearly so, from one feature to the next.]

Second, you could adapt another non-Leaflet-specific slider to do the job, like the jQRangeSlider, which has some pretty decent options for scales. Here is an example of that approach:

http://fiddle.jshell.net/nathansnider/p850sr8y/

In addition to the slider itself, it consists of a custom control, which allows you to place the slider on the map, and a function to filter the data, which is called each time the slider is moved. If you want further details on this, I'd be happy to elaborate.