JSFiddle - React, Tailwind, and code Playground

by Andrew Sokolov

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.0.2/nouislider.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.0.2/nouislider.min.css">
<select name="what" id="what">
<option name="raz" value="м²">Квартиру</option>
<option name="raz" value="м²">Дом</option>
<option name="raz" value="сотка">Земельный участок</option>
</select>
    
<div style="margin: 20px;">
    
    <div id="slider-range"></div>
</div>

    
    
<input type="text" id="amount" readonly class="result" style="border:0; color:#333; font-weight:bold; float:left;">
<input type="text" id="amount1" readonly class="result" style="border:0; color:#333; font-weight:bold; float: right;">

JavaScript

var slider = document.getElementById('slider-range');

    noUiSlider.create(slider, {
      range: {
          min: 10,
          max: 120
      },
      start: [ 40, 60 ],
      step: 2
    });

	slider.noUiSlider.on('update', function( values, handle ) {
  		$( "#amount" ).val( + values[0] + "м²")
  		$( "#amount1" ).val( + values[1] + "м²")        
    })


$("#what").change(function ()
    {
      var min =[10, 30, 2][this.selectedIndex],
      max =[120, 200, 30][this.selectedIndex],
      ra = $("#what").val(),
      valu =[[ 40, 60 ],[ 90, 130 ],[ 6, 10 ]][this.selectedIndex],
      cls =["car", "house", "money"][this.selectedIndex];
    
    slider.noUiSlider.set([min, max]);    
    }
  )