JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/excite-bike/jquery-ui.css">
<div id="wrapper">
<div id="sliders_group">
<div id="slider" class="sliders selected"></div>
<div id="slider1" class="sliders selected"></div>
</div>
Select slider:
<select id="emiStart">
<option value="6">6</option>
<option value="12">12</option>
<option value="24">24</option>
</select>
<select id="emiEnd">
<option value="6">6</option>
<option value="12">12</option>
<option value="24">24</option>
</select>
</div>
CSS
#wrapper
{
width:300px;
margin: 20px auto;
}
#sliders_group
{
height: 50px;
}
.sliders
{
width:250px;
background:#CCC;
/*Position the sliders over each other*/
position:absolute;
display:none;
}
.sliders.selected
{
/*onle display the selected slider*/
display:block;
}
JavaScript
$("#slider").slider({
value: 6,
min: 6,
max: 120,
step: 6
});
$("#slider1").slider({
value: 6,
min: 6,
max: 120,
step: 6
});
$('#emiStart').change(function(){
var currentVal = parseInt($("#slider").slider("value"));
var newValues = parseInt($(this).val());
$( "#slider" ).slider( "value", currentVal);
$( "#slider" ).slider( "option", "min", newValues );
$( "#slider" ).slider( "option", "step", newValues );
$( "#slider" ).slider( "option", "max", 120 );
$("#emiStart").val($("#slider").slider("values", 0));
});
$('#emiEnd').change(function(){
var currentVal = parseInt($("#slider1").slider("value"));
var newValues = parseInt($(this).val());
$( "#slider1" ).slider( "value", currentVal);
$( "#slider1" ).slider( "option", "min", newValues );
$( "#slider1" ).slider( "option", "step", newValues );
$( "#slider1" ).slider( "option", "max", 120 );
$("#emiEnd").val($("#slider1").slider("values", 1));
});