JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.css">
<div data-role="page" class="ui-responsive-panel">
	<div data-role="panel" id="left_panel" data-position="left" data-display="overlay" data-theme="a" data-swipe-close="false">
		<a href="#" data-rel="close" data-role="button" data-mini="true" data-inline="true" data-icon="delete" data-iconpos="right">Close</a>
	</div><!-- /panel -->
	<div data-role="content">
		<div>
			<a href="#" id="open_panel_btn" data-role="button" data-icon="arrow-r" data-iconpos="right">Open</a>
		</div>
	</div><!-- /content -->
	<div data-role="footer" data-position="fixed" data-fullscreen="true" data-tap-toggle="false" id="footer" >
		<div class="slider-container">
			<input type="range" name="slider" id="slider" min="0" value="0" max="100"/>
		</div>
	</div><!-- /footer -->
</div>

JavaScript

$("#open_panel_btn").on("click", function(e){$("#left_panel").panel("open");});