Range labels for LeafletSlider

by Alex Azuero

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css">
<div id="map"></div>

CSS

html, body, #map {
    height: 100%;
    width:100%;
    padding:0px;
    margin:0px;
    background: white;
}

#leaflet-slider {
    margin: 15px;
    display: inline-block;
}
#map .slider {
    background: white;
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.65);
    -webkit-border-radius: 4px;
    border-radius: 4px;
    text-align: center;
    padding: 8px 5px 5px 5px;
    position: relative;
}
#map #slider-min, #slider-max, #slider-current, #slider {
    display: inline-block;
    margin: 0 5px 0 5px;
}
#map .slider #slider-current {
    position: absolute;
    font-weight: bold;
    color: black;
    text-shadow: 0px 0px 5px white;
    font-size: 2.5em;
    left: 420px;
    top: -8px;
    width: 100%;
    white-space: nowrap;
    text-align: left;
}
#map .slider #slider-current .layer {
    font-size: 60%;
}

JavaScript

/////////////////////////////////////////////////////////////////////////////////////////////
//setting up the map//
/////////////////////////////////////////////////////////////////////////////////////////////

// set center coordinates
var centerlat = 34.05;
var centerlon = -118.25;

// set default zoom level
var zoomLevel = 11;

// initialize map
var map = L.map('map').setView([centerlat, centerlon], zoomLevel);

// set source for map tiles
ATTR = '&copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a> | ' +
'&copy; <a href="http://cartodb.com/attributions">CartoDB</a>';

CDB_URL = 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png';

// add tiles to map
L.tileLayer(CDB_URL, {attribution: ATTR}).addTo(map);

L.Control.SliderControl = L.Control.extend({
    options: {
        position: 'topright',
        layers: null,
        timeAttribute: 'time',
        isEpoch: false, // whether the time attribute is seconds elapsed from epoch
        startTimeIdx: 0, // where to start looking for a timestring
        timeStrLength: 19, // the size of  yyyy-mm-dd hh:mm:ss - if millis are present this will be larger
        maxValue: -1,
        minValue: 0,
        showAllOnStart: false,
        markers: null,
        range: false,
        follow: false,
        alwaysShowDate: false,
        rezoom: null
    },

    initialize: function (options) {
        L.Util.setOptions(this, options);
        this._layer = this.options.layer;

    },

    extractTimestamp: function (time, options) {
        if (options.isEpoch) {
            time = (new Date(parseInt(time))).toString(); // this is local time
        }
        return time.substr(options.startTimeIdx, options.startTimeIdx + options.timeStrLength);
    },

    setPosition: function (position) {
        var map = this._map;

        if (map) {
            map.removeControl(this);
        }

        this.options.position...