JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css">
<script src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
<div data-role="page" id="slider-test" data-theme="a"> 
    <div data-role="content">
        <div data-role="fieldcontain">
            <label for="slider">Input slider: 
                <img id="theImage" src="http://jquerymobile.com/demos/1.0b2/docs/toolbars/glyphish-icons/09-chat2.png" alt="slider images" />
            </label>
            <input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
        </div>
        
    </div>
</div>

JavaScript

$("#slider").change(function() {
    sVal = $(this).val();
    
    if(sVal > 21 && sVal <= 40) {
        $('#theImage').attr('src', 'http://jquerymobile.com/demos/1.0b2/docs/toolbars/glyphish-icons/21-skull.png');
    }
    
    if(sVal > 41 && sVal <= 60) {
        $('#theImage').attr('src', 'http://jquerymobile.com/demos/1.0b2/docs/toolbars/glyphish-icons/18-envelope.png');
    }
    
    if(sVal > 61 && sVal <= 80) {
        $('#theImage').attr('src', 'http://jquerymobile.com/demos/1.0b2/docs/toolbars/glyphish-icons/100-coffee.png');
    }
    
    if(sVal > 81 && sVal <= 100) {
        $('#theImage').attr('src', 'http://jquerymobile.com/demos/1.0b2/docs/toolbars/glyphish-icons/88-beermug.png');
    }

});