JSFiddle - React, Tailwind, and code Playground

by Rusln

HTML

<div id="slider"></div>

<select id="select">
<option value="1">Option1</option>
<option value="2">Option2</option>    
<option value="3">Option3</option>    
<option value="4">Option4</option>    
<option value="5">Option5</option>        
</select>

JavaScript

$( "#slider" ).slider({
          min: 1,
          max: 50,
    	  step:1,
    	  animate: 'true',
          range: "min",
          slide: function(event,ui){
              // 1 chane the value of <select> based on the value of the slider
              //$("#select").val(ui.value);
              var val = (Math.ceil(ui.value/10)*10).toString().substr(0,1);
              $("#select").val(val);
              
          }
});
$("#select").change(function(e){
    
    //  2 change the value of the slider based on the value of select
    $( "#slider" ).slider( "option", "value",$(this).val().toString()+0);
});