JSFiddle - React, Tailwind, and code Playground

HTML

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


<div data-role="page" id="Main">
<div data-role="header"> <h1> Main Page</h1> </div>
<div data-role="content">
        <label for="slider-0">Input slider:</label>
         <input type="range" name="slider" id="slider-0" value="25" min="0" max="100"  />
     
          <a href="#Dialog1" data-role="button" data-icon="arrow-r">Open as Page</a>
          <a href="#Dialog1" data-rel="dialog"    data-role="button" data-icon="plus">Open Dialog</a>
</div>
<div data-role="footer"><h3>Footer</h3></div>
</div>

<div data-role="page" id="Page2">
<div data-role="header"> 
<a href="#Main" data-rel="back" data-icon="back">Back</a>
<h1>Page 2</h1> </div>
<div data-role="content">
        <label for="slider-1">Input slider:</label>
         <input type="range" name="slider" id="slider-1" value="25" min="0" max="100"  />
</div>
<div data-role="footer"><h3>Footer</h3></div>
</div>


<div data-role="page" id="Dialog1">
<div data-role="header">
    <a data-rel="back" data-icon="back">back</a>
    <h1> Dialog</h1> </div>
<div data-role="content">
         <label for="slider-2">Input slider:</label>
         <input type="range" name="slider" id="slider-2" value="25" min="0" max="100"  />
</div>
<div data-role="footer"><h3>Footer</h3></div>
</div>

JavaScript

$('#Dialog1').live('pageshow', function(event, ui) {
    $('#slider-2').slider('refresh');
});