JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<p>
  <label for="amount">Minimum number of bedrooms:</label>
  <input type="text" id="amount" style="border: 0; color: #f6931f; font-weight: bold;" />
</p>
<div id="slider-range-max"></div>
<div align="right" id="test">
    <div id="price"></div>
</div>
<input type="checkbox" id="check1" value="15"> 15 <br/>
<input type="checkbox" id="check2" value="10"> 10 <br/>
<input type="checkbox" id="check3" value="5"> 5 <br/>

CSS

#test{
    font-size: 14px;
    color: #B24926;
}

JavaScript

$(function() {
    var rates = [119, 119, 139, 159, 189, 219, 249],
        rooms = 1,
        options = 0;
    
    var calculatePrice = function(){
        var total = rates[rooms] + options;
        $('#price').html('$' + total + '/clean');
    };
    
    calculatePrice();
    
    $( "#slider-range-max" ).slider({
      range: "max",
      min: 0,
      max: 6,
      value:1,
      slide: function( event, ui ) {
        $( "#amount" ).val( ui.value );
        rooms = ui.value;
        calculatePrice();        
      }
    });
    
    $( "#amount" ).val( $( "#slider-range-max" ).slider( "value" ) );
    
    $("input:checkbox").click(function() 
    {   
        $(this).siblings(':checked').prop('checked', false);
        
        if($(this).is(':checked')) {
            options = Number(this.value);
            calculatePrice();
        } else {
            options = 0;
            calculatePrice();
        }
    }); 
});