leaflet-range
leaflet-range
npm i leaflet-range
leaflet-range

leaflet-range

A simple HTML5 range control for Leaflet maps.

by consbio

0.1.5 (see all)License:ISCTypeScript:Not Found
npm i leaflet-range
Readme

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.

Downloads/wk

20

GitHub Stars

11

LAST COMMIT

5yrs ago

MAINTAINERS

1

CONTRIBUTORS

3

OPEN ISSUES

2

OPEN PRs

1
VersionTagPublished
0.1.5
latest
5yrs ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate