JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="https://raw.githack.com/seiyria/bootstrap-slider/master/js/bootstrap-slider.js"></script>
<link rel="stylesheet" href="https://raw.githack.com/seiyria/bootstrap-slider/master/css/bootstrap-slider.css">
<a href="#options" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<div id="options" class="modal hide fade">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
         <h3>Settings</h3>

    </div>
    <div class="modal-body">Vertex size
        <input id="nodeSize" data-slider-id='nodeSizeSlider' type="text" data-slider-min="1" data-slider-max="50" data-slider-step="1" data-slider-value="20" />
        <br/>
        <br/>Edge size
        <input id="edgeSize" data-slider-id='edgeSizeSlider' type="text" data-slider-min="1" data-slider-max="50" data-slider-step="1" data-slider-value="20" />
        <br/>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
        <button class="btn btn-primary" id="saveSettings">Save</button>
    </div>
</div>

JavaScript

$(document).ready(function () {
    $('#nodeSize').slider({
        formatter: function (value) {
            return value;
        }
    });

    $('#edgeSize').slider({
        formatter: function (value) {
            return value;
        }
    });
    
    $("body").on("shown.bs.modal", function() {
        $("#edgeSize").slider('relayout');
        $("#nodeSize").slider('relayout');
    });
});