JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/base/jquery-ui.css">
<h1>Firefox 10 bug</h1>
<h3>Have not experienced in version 9</h3>
<h5>jQuery 1.71, jQuery UI 1.8.16; Windows 7 and ArchLinux</h5>
<div id="slider">
</div>
<p id="desc">If you slide me left and right near the left edge, I will sometimes return -1 as the value even though my range is 0-100.</p>
<p>
    <span>Value:<span> <span id="value"></span>
</p>
<p id="footer">
    Bug not present in jQuery 1.5.2 with jQuery UI 1.8.9
</p>

CSS

body {
    margin: 50px;
    font-family: sans;
}
#slider {
    width: 50%;
    margin: 20px auto 20px auto;
}
#desc {
    font-size: 14px;
    margin-bottom: 20px;   
}
#footer {
    font-size: 14px;
    font-style:italic;
    margin-top: 20px;
}
h1 {
    font-size: 24px;
}
h3 {
    font-size: 18px;
    font-style: italic;
}
h5 {
    font-size: 12px;
    font-style: italic;
}
h1, h5 {
    margin-bottom: 10px;   
}
h3 {
    margin-bottom: 2px;   
}
span {
    font-weight: bold;   
}

JavaScript

$("#slider").slider({
    slide: function(event, ui) {
        $("#value").html(ui.value);
    }
});