JSFiddle - React, Tailwind, and code Playground

HTML

<label style="display:none;" ><input type="radio" id="p1" name="type" onchange="calc(this.value);" value="1" checked="checked"></label>
	<div class="calc_sp">
	<div class="slider_sp block_sp_1">
	<div id="slider" class="ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" aria-disabled="false">
	<div class="ui-slider-range ui-widget-header ui-corner-all ui-slider-range-min" style="width: 0%;"></div>
	</div>
	<div class="calc_sp_min-max">
	<font class="left">мин.</font><font class="left" id="mins">1000</font>
	<font class="right" id="maxs">10000</font><font class="right">мак.</font>
	<div class="clear"></div>
	</div>
	</div>
	
	<div class="block_sp_2">
	<input id="amount" onkeyup="calc(this.value);" class="calc_inp" value="100">
	</div>
	<div class="clear"></div>
</div>
<div class="left" style="margin-top: 21px;margin-left:15px;">
<font id="num"></font>		
</div>
	

	<p style="padding-top:10px; padding-bottom:20px;">
		<font style=" font-family:Arial, Helvetica, sans-serif; font-size:36px; color:#1989ca;" id="summ">105.00</font>
		<span style=" font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#9a9a9a;"></span>
		
	</p>
</div>

<div class="clear"></div>
<font style="display:none;" id="num"></font>

CSS

* {margin: 0px;padding: 0px;}
body, html{ margin: 0 auto;background:transparent;font-family: 'Open Sans', sans-serif;font-weight:300;font-weight:lighter;color:#434343;font-size:14px;}
a{font-family: 'Open Sans', sans-serif;font-weight:300;color:#f12f61;text-decoration:underline;}
a:hover{text-decoration:none;}
.calc_inp {-moz-border-bottom-colors: none;-moz-border-image: none;-moz-border-left-colors: none;-moz-border-right-colors: none;-moz-border-top-colors: none;-moz-box-sizing: border-box;background: #FFFFFF;border-color: #bababa;-moz-border-radius: 7px;-webkit-border-radius: 7px;border-radius: 7px;border-style: solid;border-width: 1px;-webkit-box-shadow: 0px 1px 0px 0px #ffffff, inset 0px 1px 3px 0px #d6d7d7 ;-moz-box-shadow: 0px 1px 0px 0px #ffffff, inset 0px 1px 3px 0px #d6d7d7 ;box-shadow: 0px 1px 0px 0px #ffffff, inset 0px 1px 3px 0px #d6d7d7 ;display: block;text-align:center;width:100px;height:35px;line-height:35px;font-family: 'Open Sans', sans-serif;color:#000000;font-size:16px;}
#slider{border-radius: 5px;width: 380px;position: absolute;height: 5px;background-color: #8e8d8d;background: #9a9a9a;box-shadow: inset 0 1px 2px 0px rgba(0, 0, 0, .5),0 1px 0 0px rgba(250, 250, 250, .5);left: 5px;}
.ui-slider-handle {position: absolute;z-index: 2;width: 18px;height: 18px;cursor: pointer;background: url('http://image.torrent.kg/images/ma52278.png') no-repeat 50% 50%;outline: none;top: -6px;margin-left: -12px;}
.ui-slider-range {background: #0A95CA;position: absolute;border: 0;top: 0;height: 100%;border-radius: 5px;}

.calc_sp {margin-top:10px;margin-left:15px;border-bottom: 1px solid #ddd;padding-bottom: 10px;width: 502px;}
	.calc_sp_min-max {position: relative;top: 12px;width: 385px;}
	.left {float:left;}
	.right {float:right;}
	.clear {clear:both;}
	.slider_sp {margin-left: 0;position: relative;}
	.block_sp_1 {float: left;position: relative;width: 390px;margin-top: 5px;margin-right: 10px;}
	.block_sp_2 {float:left;}

JavaScript

jQuery(document).ready(function () {
		if (jQuery("#p1").prop('checked')) {
			slid();
		}
		jQuery("input[name=type]:radio").change(function() {
		if (jQuery("#p1").prop('checked')) {
			slide();
		}
	})

	});

	function slid() {


	$( "#slider" ).slider({
			range: "min",
			min: 100,
			max: 5000,
			value: 100,
			slide: function( event, ui ) {
				$( "#amount" ).val( ui.value );
				calc();
			},
        change:function( event, ui ) {
				$( "#amount" ).val( ui.value );
				calc();
			}
		});
		$( "#amount" ).val( $( "#slider" ).slider( "value" ) );

		$('#amount').keyup(function() {
			var val = $(this).val();
			$('#slider').slider("value",val);
		});


	};
	function calc(par){

		var radios = document.getElementsByTagName('input');
        var value;
        for (var i = 0; i < radios.length; i++) {
        if (radios[i].type === 'radio' && radios[i].checked && radios[i].name === 'type') {
        //
        type = radios[i].value;
		    }
		}

	if(Number(type) == 1){
		num = 10;
		mins = 100;
		maxs = 5000;
	}

	if ( par ) {
		amount = mins;
	} else {
		amount = $('#amount').val();
	}
	//var summ;

	dep = Number(amount) - Number(amount) * 2 / 100 ;

	if(Number(type) == 1){
	summ = Number(amount) ;
	summ = summ + ( summ / 100 * num );

	}
	document.getElementById("mins").innerHTML=mins;
	document.getElementById("maxs").innerHTML=maxs;
	document.getElementById("summ").innerHTML=summ.toFixed(2);
	document.getElementById("num").innerHTML=num.toFixed(0);
	return false;
	}