JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/black-tie/jquery-ui.css">
<p>Progress with dir=rtl in markup reversed correctly</p>
<div id="progressbar" dir=rtl></div>
<p>Spinner with dir=rtl in markup is not reversed</p>
<input id="spinner" dir=rtl></input>

CSS

#progressbar{ margin: 10px 0; width: 500px;}

JavaScript

$(function() {
   $( "#progressbar" ).progressbar({value: 30});
    $( "#spinner" ).spinner( {value: 100} );
});