JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/ui-lightness/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);
    }
});