JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Page Title</title>

	<meta name="viewport" content="width=device-width, initial-scale=1">

	<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
	<script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
	<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
	<style>
	html, body { padding: 0; margin: 0; }
	html, .ui-mobile, .ui-mobile body {
    	height: 85px;
	}
	.ui-mobile, .ui-mobile .ui-page {
    	min-height: 85px;
	}
	.ui-content{
		padding:10px 15px 0px 15px;
	}
	</style>
</head>
<script>
$(document).on('pageinit', '#settingsView', function(){ 
    $( "input").on( "slidestop", function( event, ui ) {
        alert(this.value);
    });
$("div.ui-btn-active").css("background","#c9472f");
});
</script>

});

<body>
<div id="settingsView" data-role="page">
	<div role="main" class="ui-content">
		
    <div class="ui-field-contain">
			<label for="slider-3">Distance Selector:</label>
			<input type="range" name="slider" id="slider" value="2" min="0" max="10" data-theme="b" data-track-theme="c" data-highlight="true" />
		</div>
	
  </div>
  <div class="ui-field-contain">
			<label for="slider-2">Input slider:</label>
			<input type="range" name="slider-2" id="slider-2" value="25" min="0" max="100" data-theme="b" data-track-theme="a" data-highlight="true"/>
		</div>
    
    <div role="main" class="ui-content">
		<label for="slider-fill">Input slider:</label>
		<input type="range" name="slider-fill" id="slider-fill" value="60" min="0" max="100" data-highlight="true" />

	</div>
    
</div>
</body>
</html>