JSFiddle - React, Tailwind, and code Playground

by chayacooper

HTML

<select name="SliderSelect" id="SliderSelect">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
</select>

<input type=text name=text_value id=text_value value=Default> 
    
<div class="layout">      
    <div class="layout-slider">
        <div id="Slider" type="slider" name="area"  value="3" >
    </div>
</div>

JavaScript

var select = $("#SliderSelect");
        jQuery("#Slider").slider({ 
            from: 1, 
            to: 5, 
            scale: ['Dislike','','','', 'Love'], 
            limits: false, 
            step: 1, 
            dimension: '',
            skin: "classic",
            change: function(evt) {                 
                $('#text_value').val( $(evt.target).slider("value") ); 
            }
        }); 
        $("#SliderSelect").change(function () {
            jQuery("#Slider").slider("value", this.selectedIndex + 1);
        });