<span class="emoji" role="img" aria-label="happy face">😊</span>

<input type="range" class="slider" min="0" max="40" value="20" aria-label="temperature in degrees celsius">

<p class="temperature"><span class="temperature-output">20</span>&deg;C</p>

:root {
    font-size: 20vmin;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.emoji {
    font-size: 1em;
    margin-bottom: 0.3em;
    text-align: center;
    text-shadow: 0.02em 0.02em 0.02em rgba(0, 0, 0, 0.3);
}

.slider {
    font:inherit;
    width: 4em;
    height: 0.2em;
    border-radius: 1em;  
    background-image: linear-gradient(90deg, #384bdc, #33994a, #df3b33); 
    box-shadow: inset 0 0 0.05em rgba(0, 0, 0, 0.6);
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
}

.slider::-webkit-slider-thumb {
    position: relative;
    width: 0.25em;
    height: 0.38em;
    border-radius: 0.08em; 
    background-image: radial-gradient(#eee, #ccc);    
    filter: drop-shadow(0.02em 0.02em 0.02em rgba(0, 0, 0, 0.5));
    cursor: pointer;
    -webkit-appearance: none;
            appearance: none;
}

.slider::-moz-range-thumb {
    position: relative;
    width: 0.25em;
    height: 0.38em;
    border-radius: 0.08em; 
    background-image: radial-gradient(#eee, #bbb);    
    filter: drop-shadow(0.02em 0.02em 0.02em rgba(0, 0, 0, 0.5));
    cursor: pointer;
    border: none;
    -moz-appearance: none;
         appearance: none;
}

.temperature {
    font-family: 'Open Sans', Arial, sans-serif;
    font-size: 0.5em;
    font-weight: 400;
    margin-top: 0.45em;
    color: #111;
    text-shadow: 0.02em 0.02em 0.02em rgba(0, 0, 0, 0.1);
}

document.addEventListener("DOMContentLoaded", () => {

    const emoji = document.querySelector('.emoji'),
        slider = document.querySelector('.slider'),
        tempOutput = document.querySelector('.temperature-output'),
        displayTemp = temperature => {
            //Display temperature
            tempOutput.textContent = temperature;

            //Display emoji
            if (temperature >= 0 && temperature <= 8) {
                emoji.textContent = '🥶';
                emoji.setAttribute('aria-label', 'freezing face');
            } else if (temperature > 8 && temperature <= 16) {
                emoji.textContent = '😬';
                emoji.setAttribute('aria-label', 'cold face');
            } else if (temperature > 16 && temperature <= 24) {
                emoji.textContent = '😊';
                emoji.setAttribute('aria-label', 'happy face');
            } else if (temperature > 24 && temperature <= 32) {
                emoji.textContent = '😅';
                emoji.setAttribute('aria-label', 'warm face');
            } else {
                emoji.textContent = '🥵';
                emoji.setAttribute('aria-label', 'hot face');
            }
        }

    slider.addEventListener('input', () => displayTemp(slider.value));

    //CodePen preview window
    if (location.pathname.includes('fullcpgrid')) {

        let temperature = 0;

        const interval = setInterval(() => {

            //Remove interval if max temperature is reached
            if (temperature === 40) clearInterval(interval);

            //Update slider value
            slider.value = temperature;

            //Display temperature and emoji
            displayTemp(temperature);

            //Increase temperature
            temperature++;

        }, 95);
    }
});