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="slider1" class="sliders selected"></div>
        <div id="slider2" class="sliders"></div>
        <div id="slider3" class="sliders"></div>
    </div>
        
    Select a slider:
    <select id="selectSlider">
        <option value="slider1">Slider 1</option>
        <option value="slider2">Slider 2</option>
        <option value="slider3">Slider 3</option>
    </select>

</div>

CSS

#wrapper
{
    width:300px;
    margin: 20px auto;
}

#sliders_group
{
    height: 50px;
}

.sliders
{
    width:150px;
    background:#CCC;
    
    /*Position the sliders over each other*/
    position:absolute;
    display:none;
}   
.sliders.selected
{
    /*onle display the selected slider*/
    display:block;
}

JavaScript

$( "#slider1" ).slider({
    value: 6,
    min: 6,
    max: 120,
    step: 6
});
$( "#slider2" ).slider({
    value: 12,
    min: 12,
    max: 120,
    step: 12
});
$( "#slider3" ).slider({
    value: 24,
    min: 24,
    max: 120,
    step: 24
});


$("#selectSlider").change(function(){
    var selectedSlider = $("#selectSlider").val();
    $(".sliders").removeClass("selected");
    $("#"+selectedSlider).addClass("selected");
});