JSFiddle - React, Tailwind, and code Playground

by Albin Larsson

HTML

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<div id="leaflet" style="height:400px; width:400px">

</div>

CSS

.LeafletSlider {
  width: calc(100% - 30px);
  margin-left: 15px;
  margin-right: 15px;
  user-select: none;
  height: 30px;
}

.leaflet-bottom.leaflet-left {
  width: 100%;
}

.LeafletSlider .LeafletSlider-scale {
  background-color: #aaa;
  height: 3px;
  width: 100%;
  float: left;
}

.LeafletSlider .LeafletSlider-scale .LeafletSlider-button {
  width: 30px;
  border-radius: 4px;
  border: 2px solid rgba(0,0,0,0.2);
  height: 30px;
  position: relative;
  top: -15px;
  left: 0px;
  background-color: #fff;
  cursor: pointer;
}

.LeafletSlider .LeafletSlider-scale .LeafletSlider-button:hover {
  background-color: rgb(244, 244, 244);
}

JavaScript

var map = L.map('leaflet').setView([51.505, -0.09], 13);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

L.Control.Slider = L.Control.extend({
    onAdd: function(map) {
        var root = L.DomUtil.create('div');
        root.className += 'LeafletSlider';
        root.innerHTML = '<div class="LeafletSlider-scale"><div class="LeafletSlider-button"></div></div>';
        
        map.whenReady(function() {
          var isMouseDown = false;
          var currentVal = 0;
          var getMousePosition = function (e) {
            var posx = 0;
            var posy = 0;

            if (!e) var e = window.event;

            if (e.pageX || e.pageY) {
              posx = e.pageX;
              posy = e.pageY;
            }
            else if (e.clientX || e.clientY) {
              posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
              posy = e.clientY + document.body.scrollTop  + document.documentElement.scrollTop;
            }
            
            return { 'x': posx, 'y': posy };
          };

          var updatePosition = function (e) {
            var pos = getMousePosition(e);

            var spanX = (pos.x - startMouseX);

            var newPos = (lastElemLeft + spanX);

            var upperBound = (root.querySelector('.LeafletSlider-scale').offsetWidth  - root.querySelector('.LeafletSlider-button').offsetWidth);
            newPos = Math.max(0, newPos);
            newPos = Math.min(newPos, upperBound);
            currentVal = Math.round((newPos / upperBound) * 100, 0);

            root.querySelector('.LeafletSlider-button').style.left = newPos + 'px';
          };

          function startSlide(e) {
            isMouseDown = true;
            map.dragging.disable();
            var pos = getMousePosition(e);
            startMouseX = pos.x;

            lastElemLeft =...