leaflet-range

0.1.5 • Public • Published

Leaflet.Range

A simple HTML5 range control for Leaflet maps.

See the example.

Tested with Leaflet 1.1.0

Install

npm install leaflet-range

Usage

Include the CSS:

<link rel="stylesheet" href="L.Control.Range.css" />

Include the JavaScript:

<script src="L.Control.Range-min.js"></script>

The control can be oriented vertically or horizontally. It will fire input and change events as the user interacts with the slider.

Example usage:

 
var slider = L.control.range({
    position: 'topright',
    min: 0,
    max: 100,
    value: 50,
    step: 1,
    orient: 'vertical',
    iconClass: 'leaflet-range-icon'
});
 
slider.on('input change', function(e) {
    console.log(e.value); // Do something with the slider value here
});
 
map.addControl(slider);

Credits:

Developed and maintained with support from the U.S. Forest Service and the USDA Northwest Climate Hub.

Readme

Keywords

Package Sidebar

Install

npm i leaflet-range

Weekly Downloads

11

Version

0.1.5

License

ISC

Unpacked Size

9.74 kB

Total Files

9

Last publish

Collaborators

  • nikmolnar