JSFiddle - React, Tailwind, and code Playground

by Vitaly Volovich

HTML

<div class="item item-1">
  <input type="text" maxlength="3" class="item-input in-min" value=1 style="border:0; color:#f6931f; font-weight:bold;">
  <div class="item-slider">
    <div class="slider"></div>
  </div>
  <input type="text" maxlength="3" class="in-max item-input" value=500 style="border:0; color:#f6931f; font-weight:bold;">
  <label for="amount">Parameter A</label>
  <input type="text" class="amount par-A" style="border:0; color:#f6931f; font-weight:bold;" />
</div>

<div class="item item-2">
  <input type="text" maxlength="3" class="item-input in-min" value=13 style="border:0; color:#f6931f; font-weight:bold;">
  <div class="item-slider">
    <div class="slider"></div>
  </div>
  <input type="text" maxlength="3" class="in-max item-input" value=500 style="border:0; color:#f6931f; font-weight:bold;">
  <label for="amount">Parameter B</label>
  <input type="text" class="amount par-B" style="border:0; color:#f6931f; font-weight:bold;" />
</div>
<div class="formula">
<div class="result">0</div>
  <select name="formula" class="formula">
    <option value="A+B">A+B</option>
    <option value="A+B">A+B*2</option>
    <option value="A+B">A/B</option>
    <option value="A+B">(2*A+3*B)^2</option>
  </select>
</div>
<div class="custom">
  <div class="result2">0</div>
  <input class="cformula" type="text" value="A-B"/>
</div>

CSS

.item{
  width:80%;
  margin:30px auto;
}
.item-min,.item-max,.item-slider{
  display:inline-block;
  margin:0 5px;
}
.item-slider{
  width:75%;
 }

.item-input,.amount{ 
  width:30px;
  text-align:center;
}
.amount{
  margin:20px 0;
  width:40px;
}
.formula,.custom{
  text-align:center;
}
.result,.result2{
  width:40px;
  background-color:white;
  padding:5px;
  margin:10px auto;
}

JavaScript

var pars=["par-A","par-B"];
$(".item .slider").slider({
  range: "min",
  min: 1,
  max: 500,
  value: 37,
  animate: true,
  slide: function( event, ui ) {
  	$(event.target).parent().siblings(".amount").val( ui.value );
    refresh();
    //$( ".amount" ).val( "$" + ui.value );
   }
});
$(".item-2 .slider").slider("option",{value:13,min:13})
//$( ".amount" ).val( "$" + $( ".slider" ).slider( "value" ));
$(".item").each(function(){
	$(".amount",this).val( $( ".slider",this ).slider( "value" ));
});
refresh();

$(".item").change(function(e){
	$(".item").each(function(){
  	var imin=parseInt( $('.in-min',this).val() );
  	var imax=parseInt( $('.in-max',this).val() );
 	  $(".slider",this).slider("option",{ min:imin,max:imax} );	
   	$(".amount",this).val( $( ".slider",this ).slider( "value" ));
    refresh();
  });
});
function refresh() {
	var A=parseInt( $('.par-A').val() );
  var B=parseInt( $('.par-B').val() );
  var fn=$(".formula option:selected").text();
  var result=parseInt( eval(fn)*100)/100;
  var fn2=$(".cformula").val();
  var result2=parseInt( eval(fn2)*100)/100;
  $(".result").text(result);
  $(".result2").text(result2)
};
$(".formula,.cformula").change(function(e){
	refresh();
});