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" 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" style="border:0; color:#f6931f; font-weight:bold;" />
</div>
<div class="formula">
<div class="result">0</div>
  <select name="formula" id="">
    <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>

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{
  text-align:center;
}
.result{
  width:40px;
  background-color:white;
  padding:5px;
  margin:10px auto;
}

JavaScript

$(".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 );
    //$( ".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" ));
});

$(".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" ));
  });
	

});