JSFiddle - React, Tailwind, and code Playground

by AJIEKCEU

HTML

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div class="calculator">
  <h2>рассчитайте вашу прибыль</h2>
  <div class="calculator__fields">
    <div class="volume">
      <label class="calculator__ttl">Объем закупки в месяц</label>
      <div class="calculator__field-wrp">
        <input class="calculator__field" type="text" id="volume" data-min="25000" data-max="500000" data-step="5000">
        <span>руб.</span>
      </div>
      <div id="volume-slider"></div>
    </div>
    <div class="markup">
      <label class="calculator__ttl">Наценка</label>
      <div class="calculator__field-wrp">
        <input class="calculator__field" type="text" id="markup" data-min="100" data-max="150" data-step="10">
        <span>%</span>
      </div>
      <div id="markup-slider"></div>
    </div>
  </div>
</div>
<div class="proceeds"></div><div class="total"></div>

CSS

/*! jQuery UI - v1.12.1 - 2016-10-07
* http://jqueryui.com
* Includes: core.css, slider.css, theme.css
* To view and modify this theme, visit http://jqueryui.com/themeroller/?scope=&folderName=base&cornerRadiusShadow=8px&offsetLeftShadow=0px&offsetTopShadow=0px&thicknessShadow=5px&opacityShadow=30&bgImgOpacityShadow=0&bgTextureShadow=flat&bgColorShadow=666666&opacityOverlay=30&bgImgOpacityOverlay=0&bgTextureOverlay=flat&bgColorOverlay=aaaaaa&iconColorError=cc0000&fcError=5f3f3f&borderColorError=f1a899&bgTextureError=flat&bgColorError=fddfdf&iconColorHighlight=777620&fcHighlight=777620&borderColorHighlight=dad55e&bgTextureHighlight=flat&bgColorHighlight=fffa90&iconColorActive=ffffff&fcActive=ffffff&borderColorActive=003eff&bgTextureActive=flat&bgColorActive=007fff&iconColorHover=555555&fcHover=2b2b2b&borderColorHover=cccccc&bgTextureHover=flat&bgColorHover=ededed&iconColorDefault=777777&fcDefault=454545&borderColorDefault=c5c5c5&bgTextureDefault=flat&bgColorDefault=f6f6f6&iconColorContent=444444&fcContent=333333&borderColorContent=dddddd&bgTextureContent=flat&bgColorContent=ffffff&iconColorHeader=444444&fcHeader=333333&borderColorHeader=dddddd&bgTextureHeader=flat&bgColorHeader=e9e9e9&cornerRadius=3px&fwDefault=normal&fsDefault=1em&ffDefault=Arial%2CHelvetica%2Csans-serif
* Copyright jQuery Foundation and other contributors; Licensed MIT */

/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
	display: none;
}
.ui-helper-hidden-accessible {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
.ui-helper-reset {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	line-height: 1.3;
	text-decoration: none;
	font-size: 100%;
	list-style: none;
}
.ui-helper-clearfix:before,
.ui-helper-clearfix:after {
	content: "";
	display: table;
	border-collapse: collapse;
}
.ui-helper-clearfix:after {
	clear: both;
}
.ui-helper-zfix {
	width: 100%;
	height: 100%;
	top: 0;
	left:...

JavaScript

var volumeMin = $('#volume').data('min'),
		volumeMax = $('#volume').data('max'),
    volumeStep = $('#volume').data('step'),
    markupMin = $('#markup').data('min'),
		markupMax = $('#markup').data('max'),
    markupStep = $('#markup').data('step');
function calculation(){
	var valVolume = $('#volume').val(),
  		valMarkup = $('#markup').val()/100,
      proceeds = Math.floor(valVolume*valMarkup),
      total = proceeds*12;
  $('.proceeds').text(proceeds);  
  $('.total').text(total);
}
$('#volume-slider').slider({
      range: "max",
      min: volumeMin,
      max: volumeMax+volumeStep*2,
      step: volumeStep,
      create: function( event, ui ) {
      	$('#volume').val($('#volume-slider').slider('value'));
      	calculation();
      },
      slide: function( event, ui ) {
        $("#volume").val( ui.value );
        if(ui.value > volumeMax){
          $("#volume").val('>'+volumeMax+'');
        }
        calculation();
      }
});


$('#markup-slider').slider({
      range: "max",
      min: markupMin,
      max: markupMax,
      step: markupStep,
      create: function( event, ui ) {
      	$('#markup').val($('#markup-slider').slider('value'));
      	calculation();
      },
      slide: function( event, ui ) {
        $("#markup").val( ui.value );
        calculation();
      }
});
$('#markup').val($('#markup-slider').slider('value'));



$('#volume').change(function(){
	var val = $(this).val();
  if(val < volumeMin){
  	$(this).val(volumeMin);
  }
  else if(val > volumeMax){
  	$(this).val('>'+volumeMax+'');
  }
	$('#volume-slider').slider('value', val);
  calculation();
});

$('#markup').change(function(){
	var val = $(this).val();
  if(val < markupMin){
  	$(this).val(markupMin);
  }
  else if(val > markupMax){
  	$(this).val(markupMax);
  }
	$('#markup-slider').slider('value', val );
  calculation();
});

$('.calculator').on('keyup', '.calculator__field', function(){
	this.value = this.value.replace(/[^\d]/g, '');
});