JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.roundslider/1.3/roundslider.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jquery.roundslider/1.3/roundslider.min.css">
<section class="grafic-width">



    <div class="grafic-row">
        <p class="latime">R&amp;D Spend</p>
        <form id="calculationForm" onsubmit="return false">
            <input name="flevel" id="flying1" type="range" min="0" max="5000000" step="10000" value="0" onchange="add_two_number();">
            <label class="right-align">
                <p>$</p>
                <output id="slider1out" value="" for="flying1" name="level"></output>
                <p></p>
            </label>
            <div class="clearfix"></div>
        </form>
        <div class="clearfix"></div>
    </div>

    <div class="clearfix"></div>

    <div class="grafic-row">
        <p class="latime-auto">Was your business profitable?</p>
        <div class="form">
            <p>Yes</p>
            <label class="switch">
                <input id="js--checkbox" type="checkbox">
                <div class="slider round"></div>
            </label>
            <p>No</p>
        </div>
        <div class="clearfix"></div>
    </div>

    <div class="clearfix"></div>

    <div class="grafic-row" id="slider2">
        <p class="latime">Business Losses</p>
        <form id="calculationForm2" onsubmit="return false" oninput="level.value = flevel.valueAsNumber">
            <input name="flevel" id="flying2" type="range" min="0" max="5000000" step="10000" value="0" onchange="add_two_number();">
            <p>$</p>
            <output id="slider2out" for="flying2" name="level"></output>
            <p></p>
        </form>
        <div class="clearfix"></div>
    </div>
    <div class="types">
        <div class="overlay"></div>
        <div class="container">
            <div class="control">
                <div...

CSS

body {
    padding: 30px;
    background: #ebebeb;
}

p {
    float: left;
    margin-top: -1px;
    color: #9b9b9b;
}

form {
    display: block;
    width: 97%;
    float: left;
}

.form p {
    padding: 0 10px;
}

.latime {
    width: 90%;
}

.form {
    float: right;
    width: 95%;
}

.clearfix {
    clear: both;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.0);
    /*dim the background*/
}


/*----------------portocaliu #ea7937 -------------------------*/


/*----------------gri #c7c7c7 -----------------------------*/


/** FF*/

input[type="range"] {
    width: 110px;
    float: left;
    padding: 0;
}

input[type="range"]::-moz-range-progress {
    background-color: #ea7937;
}

input[type="range"]::-moz-range-track {
    background-color: #c7c7c7;
}


/* IE*/

input[type="range"]::-ms-fill-lower {
    background-color: #ea7937;
}

input[type="range"]::-ms-fill-upper {
    background-color: #c7c7c7;
}

output {
    float: left;
    padding: 0 0 3px;
    color: #9b9b9b;
}


/*--------------round slider----------------*/

.types {
    display: block;
    padding: 10px 0;
    overflow: hidden;
    width: 100%;
    position: relative;
}

.container {
    display: block;
}

.control {
    display: block;
    padding: 10% 0;
}

.rs-range-color {
    background-color: #ea7937;
}

.rs-path-color {
    background-color: #c7c7c7;
}

.rs-handle {
    background-color: transparent;
}

.rs-control {
    margin: 0 auto;
}

.rs-inner {
    background: #F0F0F0;
}


/* ------------ Switch Button ---------- */


/* The switch - the box around the slider */

.switch {
    position: relative;
    display: inline-block;
    width: 45px;
    height: 20px;
    float: left;
}


/* Hide default HTML checkbox */

.switch input {
    display: none;
}


/* The slider */

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom:...

JavaScript

function updateTextInput(val) {
    document.getElementById('textInput').value = val;
}

$(function() {

	function numberWithCommas(x) {
		return x.toString().replace(/\B(?=(?:\d{3})+(?!\d))/g, ",");
	}

	$('#calculationForm').on('input', function(){
		$('#slider1out').html(numberWithCommas($('#flying1').val()));
	});
  
  $('#calculationForm2').on('input', function(){
		$('#slider2out').html(numberWithCommas($('#flying2').val()));
	});

	/**/
	$('#js--checkbox').change(function(e) {
		if ($('#js--checkbox').is(':checked')) {
			$('#slider2').slideDown();
		} else {
			$('#slider2').slideUp();
		}
	});

	$(document).ready(function() {
		$('#flying1').val('80000').trigger('change');
		add_two_number();
	});

    $('#flying1').on("input change", function() {

        var
            element = $('#flying1'),
            value = element.val(),
            step;

        /* 
          Map your rules 
        */
        if (value < 150000) {

            step = 10000;
        } else if (value < 250000) {

            step = 50000;

        } else if (value < 500000) {
            step = 100000;

        } else if (value < 500000) {
            step = 100000;

        } else if (value > 1000000) {
            step = 500000;
        }



        element.attr('step', step);
    });
});

$(function() {

    $('#flying2').on("input change", function() {

        var
            element = $('#flying2'),
            value = element.val(),
            step;

        /* 
          Map your rules 
        */
        if (value < 150000) {

            step = 10000;
        } else if (value < 250000) {

            step = 50000;

        } else if (value < 500000) {
            step = 100000;

        } else if (value < 500000) {
            step = 100000;

        } else if (value > 1000000) {
            step = 500000;
        }
        element.attr('step', step);
    });
});

function add_two_number() {
    $("#display_message").show();
    if ($("#flying1").val() == "" ||...