JSFiddle - React, Tailwind, and code Playground

by stopsatgreen

HTML

<div class="labels"><input type="range" max="40" min="-10" value="0" step="2" id="range"></div>
<div id="output"></div>

CSS

.labels { display: inline-block; vertical-align: bottom; }
.labels input { vertical-align: bottom; }
.labels::before { content: '-10'; }
.labels::after { content: '40'; }

JavaScript

var range = document.getElementById('range'),
    output = document.getElementById('output');
range.addEventListener('change', function(e){
    logTemp(e.target.value);
});
function logTemp(tempNow) { 
    var tempMsg,
        tempImg = '';
    output.innerHTML = '';
    if (tempNow <= 0) {
        tempMsg = 'Freezing';
        tempImg = [
        'http://media-cache-ak0.pinimg.com/236x/2f/44/12/2f4412424744e3c1b0eef637f070dbf1.jpg',
        'http://media-cache-ec0.pinimg.com/236x/c4/5d/42/c45d42e606efe83d6be6a3c38afbc685.jpg'
        ];
    } else if (tempNow > 0 && tempNow <=10) {
        tempMsg = 'Cold';
        tempImg = [
        'http://media-cache-ec0.pinimg.com/236x/2c/12/26/2c12267245d0bc7aed6d6d58c16c0416.jpg'        
        ];
    } else if (tempNow > 10 && tempNow <= 15) {
        tempMsg = 'Chilly';
        tempImg = [
        'http://media-cache-ec0.pinimg.com/236x/f3/50/8c/f3508c1bb579866298f24b2c9269ceb7.jpg',
        'http://media-cache-ec0.pinimg.com/236x/7b/03/c1/7b03c1f2d061d1013ee0b7ce168d207f.jpg'
        ];
    } else if (tempNow > 15 && tempNow <= 20) {
        tempMsg = 'Mild';
        tempImg = [
        'http://media-cache-cd0.pinimg.com/236x/e9/87/a2/e987a24fb485ae3b9fae8db897651696.jpg',
        'http://media-cache-ak0.pinimg.com/236x/bb/72/5f/bb725f7a0c8ee5bc3ad39b10eec2e8c7.jpg'
        ];
    } else if (tempNow > 20 && tempNow <= 27) {
        tempMsg = 'Warm';
        tempImg = [
        'http://media-cache-ec0.pinimg.com/236x/a0/6f/85/a06f85156e9e79fc100aefe4488e0291.jpg',
        'http://media-cache-ak0.pinimg.com/236x/61/8b/93/618b93f43788ccd560c29e77510e7627.jpg'
        ];
    } else {
        tempMsg = 'Hot';
        tempImg = [
        'http://media-cache-ak0.pinimg.com/236x/ae/1d/20/ae1d2062b7426ad78cec89fda5efb906.jpg'
        ];
    }
    var thisSet = document.createElement('div'),
        title = document.createElement('h1');
    title.textContent = tempMsg;
    thisSet.appendChild(title);
    for (var i = 0; i <...