No description, website, or topics provided.
JavaScript CSS HTML
Latest commit 1cf3289 Jan 10, 2016 @Eclipse1979 Merge pull request #2 from smellman/sync_update
some bug fixes and add synchronize update feature

README.md

Leaflet-Slider

Adds a range input slider to a leaflet map which automatically update when the input value is changed by calling a function taking the value as a parameter.

Check out the Demo.

Using Leaflet-Slider :

The slider can be insterted like this: you create the control. The function fn should only take the value of the input as a parameter and will be called when the input value is changed.

newSlider = L.control.slider(<Function> fn, <Control.Slider options> options);

Simple usage example :

slider = L.control.slider(function(value) {console.log(value);}, {id:slider, 'vertical'});
slider2 = L.control.slider(function(value) {alert(value);}, {id:slider2, orientation: 'horizontal'});

Options :

  • width: width of the slider, default is ‘100px’.
  • position: position of the slider, default is ‘topright’. See L.Control in leaflet’s API.
  • min: minimal value of the slider, default is 0.
  • max: maximal value of the slider, default is 100.
  • step: incremental step of values in range, default is 1.
  • id: name of the slider, default is “slider”.
  • value: onload value of the slider, default is 50.
  • collapsed: wether the slider collapses when it looses focus, default is true.
  • title: value of the title attribute, default is 'Leaflet Slider'.
  • logo: letter on the button when collapsed, default is 'S'.
  • orientation: orientation of the slider, either 'horizontal' or 'vertical', default is 'horizontal'.
  • showValue: wether or not the value of the input should be shown next to the slider, default is true.
  • getValue: the function called to transform the input of the slider into the value shown by showValue, default is function(value) {return value;}.
  • increment: wether or not there should be increment and decrement buttons next to the slider, default is false.
  • syncSlider: if set true, the value synchronizes slider's position, default is false.