JSFiddle - React, Tailwind, and code Playground

HTML

<script src="jquery.min.js"></script>
<script src="jquery.nouislider.min.js"></script>
<link rel="stylesheet" href="jquery.nouislider.css">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">

<div class="example">

            <div id="noUiSlider" class="noUiSlider"></div>

<div id="valueInput">

    
</div>

<div id="slideType">The slider hasn't been changed yet.</div>
            <button id="increase"type="button">Increase</button>
            <button id="decrease"type="button">Decrease</button>

CSS

.example {margin-top:100px;}

JavaScript

// wrap the init function in a variable, so we can easily call it again.

var init = function(){

    var stepSetting = false;
    
    // the step setting is based on whether or not a checkbox is checked.        
    if ($("#valueInput input[type='checkbox']").is(':checked')){
    
        stepSetting=1;
    
    }

    // clear the $("#noUiSlider") div, then initialize.
    $("#noUiSlider").empty().noUiSlider( 'init', {
    
        step: stepSetting,
        handles :   1,
        connect :   'lower',
        scale   : [1,400],
        start   : 1,
        change:
            function(){
            
                // the noUiSlider( 'value' ) method returns an array.
                var values = $(this).noUiSlider( 'value' );
                
                $(this).find('.noUi-lowerHandle .infoBox').text(values[0]);
                $(this).find('.noUi-upperHandle .infoBox').text(values[1]);
            
            },
        end:
            function(type){
            
                // 'type' can be 'click', 'slide' or 'move'
            
                var message = "The slider was last changed by ";
            
                if ( type=="click" ){ message=message+"clicking the bar."; }
                else if ( type=="slide" ){ message=message+"sliding a knob."; }
                else if ( type=="move" ){ message=message+"calling the move function."; }
            
                /*$("#slideType").fadeOut(function(){
                
                    $(this).text(message).fadeIn();
                
                });*/
            
            }
            
    // the number displays aren't noUiSliders default, so we need to add elements for those.
    // index is a counter that counts all objects .each() has passed.
    }).find('.noUi-handle div').each(function(index){

        // appending the element, calling the 'value' function each time to get the value for the knob.
        $(this).append('<span...