JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<tr>
<td style="width: 140px; height: 25px;"><asp:Label ID="lblHeader" runat="server" CssClass="InputHeader" meta:resourcekey="lblHeader" /></td>
<td><asp:Label ID="lblLeft" runat="server" Text="L" CssClass="sliderLabelLeft" />
<div id="slider" style="margin-top:100px;"></div>
<asp:Label ID="lblRight" runat="server" Text="R" CssClass="sliderLabelRight" />
</td>
<td><div id="amount" style="padding: 10px; border: 3px solid silver; text-align:center;"></div></td>
</tr>
JavaScript
// When the browser is ready...
$(function () {
// Create a new jQuery UI Slider element
// and set some default parameters.
$("#slider").slider({
range: "min",
value: 50,
min: 0,
max: 100,
slide: function (event, ui) {
// While sliding, update the value in the #amount div element
var value = $("#slider").slider("value"); // You can use value anywhere
$("#amount").text(value);
$("#amount").css("font-size", value);
}
});
value = $("#slider").slider("value");
$("#amount").text(value);
$("#amount").css("font-size", value);
});