JSFiddle - React, Tailwind, and code Playground

by Walter Rumsby

HTML

<div class="adjustment">
    <div class="total invisible">
        <span class="amount">0</span>
        <span class="freq">per month</span>        
    </div>        
    <div class="slider">
        <span class="slider-begin slider-bound">0</span>
        <span class="grid"><input id="slide" type="range" min="0" max="100" step="1" value="0"></span>
        <span class="slider-end slider-bound">100</span>
    </div>
    <div class="averages red invisible">
        Spend an extra
        <span class="spend-extra"></span>
        with this goal
    </div>
</div>
<div>
    <a href="#" id="set-value-to-0">Set value to 0</a>
</div>

CSS

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
}

.red {
    color: red;
}

.adjustment {
    z-index: 100; 
    position: relative;    
}

.averages {
    top: 60px;
    font-weight: bold;
}

.total.invisible,
.averages.invisible{
    opacity: 0;
}

.total,
.averages {
    -webkit-transition: opacity 0.6s ease-out;
    opacity: 1;
    padding: 0 0 3px 15px;   
}

.amount {
    font-weight: bold;
    font-size: 16px;
    color: rgb(60, 66, 74);
}

.freq {
    color: rgb(148, 155, 164);
    font-weight: bold;
    margin: 1px 0 0 3px;    
}

/* TODO: would add Modernizr rules here */
.slider {
    position: relative;
    padding: 2px 0 0 15px;
    width: 310px;
    height: 28px
}

.grid {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARAAAAAECAYAAABGOmAsAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAAAV0lEQVRYR+3SsQ0AIAhEUWD/zYyFy6gdTkBFAoWfAbjwOBlz+T7XK4asvDKGGEYCHd0wF5eqISsvjSGGkUBHNyz/DjYggMCvAqaiZbeTlafGEMNIoKMbD/DOSp+6HwWTAAAAAElFTkSuQmCC);
    margin: 0px 0 0 14px;
    padding: 4px 0 0 0;
    background-size: 94%;
    background-position-x: 9px;
    background-repeat: no-repeat;
}



.slider-bound {
    color: rgb(192, 198, 205);
    font-weight: bold;
    position: absolute;
    top: 8px;
}

.slider-begin {
    left: 14px;
}

/* TODO: this should actually be a left value because can be 100, 500, 1000, etc. */
.slider-end {
    right: 0px;
}


.slider input[type="range"] {
    -webkit-appearance: none;
    background-color: #DDDAD7;
    background-size: 100%;

    border: 1px solid #C4CDC1;
    box-shadow: inset 1px 1px 2px #bbb;
    border-radius: 3px;
    margin: 0;
    padding: 0;
    width: 270px;
    height: 4px;
    
    -webkit-transition: attr(value) 0.2s ease-out;
    transition: attr(value) 0.2s ease-out;
}

.slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;

    z-index: 100;
    
    width: 17px;
   ...

JavaScript

(function() {
    function updateSlider(slideAmount) {
        $('.amount').html(slideAmount);
        $('.spend-extra').html((slideAmount * 12) + ' per year');   

        if (slideAmount === 0) {
            $('.total, .averages').addClass('invisible');  
        } else {
            $('.total, .averages').removeClass('invisible');  
        }
    }
    
    $('#slide').on('change', function() {
        updateSlider(+this.value);
    }); 

    $('#set-value-to-0').on('click', function(e) {
        e.preventDefault();
        $('#slide').val(0);
    });        
}());