JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />

<div data-role="page" id="foo"> 
 
    <div data-role="header"> 
        <h1>Slider Example</h1> 
    </div><!-- /header --> 
 
    <div data-role="content" id="one">    

        <div data-role="fieldcontain">
            <label for="slider">Input slider: </label>
             <input type="range" name="slider" id="slider" value="0" min="0" max="100"  />
        </div>
    </div><!-- /content --> 

</div><!-- /page one -->

CSS

.ui-slider-text {
    font-size: 0.8em;
}

JavaScript

$.fn.extend({
    sliderLabels: function(left,right) {
        var $this = $(this); 
        var $sliderdiv= $this.next("div.ui-slider[role='application']");
        $sliderdiv
        .css({'font-weight': 'normal'}); 
        $sliderdiv
        .prepend('<span class="ui-slider-inner-label"  style="position: absolute; left:0px; top:20px;">'+left+ '</span>')
        .append('<span class="ui-slider-inner-label" style="position: absolute; right:0px; top:20px;">'+right+ '</span>');         
    }
});

$('#slider').sliderLabels('LEFT','RIGHT');