JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<div data-role="page" data-add-back-btn="true">
    <div data-role="header" data-position="fixed">
        <h1>Sliders</h1>
        <a href="#dynamic-sliders" data-icon="arrow-r" data-iconpos="right" class="ui-btn-right">To Dynamic Sliders Page</a>
    </div>
    <div data-role="content">
        
        <p>
            <label for="range-input2">Slider with highlight:</label>
            <input type="range" name="range-input2" id="range-input2" value="60" min="0" max="100" step="10" data-highlight="true" />
        </p>
       
        <div data-role="footer" data-position="fixed">
            <h1>fotter</h1>
        </div>
    </div>
</div>

<div data-role="page" data-add-back-btn="true" id="dynamic-sliders">
    <div data-role="header">
        <h1>Dynamic Sliders</h1>
        <a href="#dynamic-switches" data-icon="arrow-r" data-iconpos="right" class="ui-btn-right">To Dynamic Switch Page</a>
    </div>
    <div data-role="content">
        <h3 class="centered-content">Create another slider by pressing the button</h3>
        <a href="#" data-role="button" id="disable-button" data-inline="true">Disable sliders</a>
        <a href="#" data-role="button" id="enable-button" data-inline="true">Enable sliders</a>
        <a href="#" data-role="button" id="set-value" data-inline="true">Set value and use refresh</a>
        <a href="#" data-role="button" id="create-button" data-inline="true">Create another slider</a>

    </div>
    <div data-role="footer" data-position="fixed">
        <h1>fotter</h1>
    </div>
</div>

<div data-role="page" data-add-back-btn="true" id="dynamic-switches">
    <div data-role="header">
        <h1>Dynamic Switches</h1>
    </div>
    <div data-role="content">
        <h3 class="centered-content">Create another switch by pressing the button</h3>
        <a...

CSS

.longer-switch div.ui-slider-switch {
    width: 8%;
    min-width: 120px;
    max-width: 180px;
}

JavaScript

$('#dynamic-sliders').live('pageinit', function () {
    $('#create-button').click(function () {
        $('<label for="range">Range:</label><input type="number" data-type="range" class="dynamic-slider" name="range" id="range" value="40" min="0" max="100" step="10" data-highlight="true"/>')
        .insertAfter("#create-button");
        $("#range").slider({
            create: function () {
                console.log('Creating new slider...');
            }
        }).textinput();
    });

    $('#disable-button').click(function () {
        $('.dynamic-slider').slider('disable');
    });

    $('#enable-button').click(function () {
        $('.dynamic-slider').slider('enable');
    });

    $('#set-value').click(function () {
        $('.dynamic-slider').val(70).slider('refresh');
    });
});

$('#dynamic-switches').live('pageinit', function () {
    $('#create-switch').click(function () {
        $('<select name="flip-switch" class="new-switch" data-role="slider">' +
            '<option value="0">No</option>' +
            '<option value="1">Yes</option>' +
        '</select>')
        .insertAfter("#create-switch")
        .slider({
            create: function () {
                console.log('Creating new slider...');
            }
        });
    });

    $('#disable-switch').click(function () {
        $('.new-switch').slider('disable');
    });

    $('#enable-switch').click(function () {
        $('.new-switch').slider('enable');
    });

     $('#set-switch-value').click(function () {
        if ($('.new-switch').val() == 1) {
            $('.new-switch').val(0).slider('refresh');
        } else {
            $('.new-switch').val(1).slider('refresh');
        }
    });
});