JSFiddle - React, Tailwind, and code Playground

by DigitalBiscuits

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>
        
    Select slider:
    <select id="dropdown">
        <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
});

$('#dropdown').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 );
});