input event with input[type="range"]

testing to see if using input event works better than change

by Roydon DSouza

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;dummy=.js"></script>
<div style="margin-top: 1em">
     <h3>Zoom: <span id="result">4</span></h3>
 <span class="top">
        <input id="in" type="button" value="+">
    </span>

    <input id="price" class="slide" type="range" min="4" max="21" step="1" value="4" /> <span class="bottom">
        <input id="out" type="button" value="-">
    </span>

</div>
<div id="mapDiv" style="margin-top:120px;width: 500px; height: 375px; border: solid 2px #666;"></div>

CSS

.slide {
    margin-top: 60px;
    transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    /*do same for other browsers if required*/
}
.top {
    top: 40px;
    left: 63px;
    position: absolute;
}
.bottom {
    top: 195px;
    left: 63px;
    position: absolute;
}

JavaScript

/* oninput event handler (and input event handler event types) on html5 input[type="range"] 
   by @girlie_mac

In this example, both "change" and "input" behave the same.

See another example at http://jsfiddle.net/girlie_mac/CcqU7/

*/


var p = document.getElementById("price"),
    zoomin = document.getElementById("in"),
    zoomout = document.getElementById("out"),
    res = document.getElementById("result");

p.addEventListener("input", function () {
    updateProp()
}, false);

zoomin.addEventListener("click", function () {
    console.log(p);
    p.stepUp(1);
    updateProp()
}, false);

zoomout.addEventListener("click", function () {
    console.log(p);
    p.stepDown(1);
    updateProp()
}, false);

function updateProp() {
    res.innerHTML = p.value;
    map.setZoom(parseInt(p.value));

}




/*GOOGLE MAPS - DUMMY- */
// Change this array to test.
var points = [{
    lat: 36.170603,
    lng: -114.577065
}, {
    lat: 35.144478,
    lng: -115.33516959999997
}];

function getBoundsZoomLevel(bounds, mapDim) {
    var WORLD_DIM = {
        height: 256,
        width: 256
    };
    var ZOOM_MAX = 21;

    function latRad(lat) {
        var sin = Math.sin(lat * Math.PI / 180);
        var radX2 = Math.log((1 + sin) / (1 - sin)) / 2;
        return Math.max(Math.min(radX2, Math.PI), -Math.PI) / 2;
    }

    function zoom(mapPx, worldPx, fraction) {
        return Math.floor(Math.log(mapPx / worldPx / fraction) / Math.LN2);
    }

    var ne = bounds.getNorthEast();
    var sw = bounds.getSouthWest();

    var latFraction = (latRad(ne.lat()) - latRad(sw.lat())) / Math.PI;

    var lngDiff = ne.lng() - sw.lng();
    var lngFraction = ((lngDiff < 0) ? (lngDiff + 360) : lngDiff) / 360;

    var latZoom = zoom(mapDim.height, WORLD_DIM.height, latFraction);
    var lngZoom = zoom(mapDim.width, WORLD_DIM.width, lngFraction);

    return Math.min(latZoom, lngZoom, ZOOM_MAX);
}

function createMarkerForPoint(point) {
    return new google.maps.Marker({
       ...