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'),
     settings = {
		range: {
			'min': 10,
			'max': 120
		},
		start: [ 40, 60 ],
		margin: 2,
		step: 2
	};

    noUiSlider.create(slider, settings);

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

$("#what").change(function(){
    console.log(this.selectedIndex);
    settings.range.min = [10, 30, 2][this.selectedIndex];
    settings.range.max = [120, 200, 30][this.selectedIndex];
    settings.start = [[ 40, 60 ], [ 90, 130 ], [ 6, 10 ]][this.selectedIndex];
    
 	var cls =["car", "house", "money"][this.selectedIndex];
        
    slider.noUiSlider.destroy();
    
    noUiSlider.create(slider, settings);

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

bindValue();