JSFiddle - React, Tailwind, and code Playground

by levan gongadze

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="container">
   <select class="car_brand" name="car_brand">
      <option value="">ბრენდი</option>
      @foreach($brands as $val)
      <option value="{{$val->id}}">{{$val->brand}}</option>
      @endforeach
   </select><br
   <select class="car_models" name="car_models">
      <option value="">მოდელი</option>
   </select><br
   <input type="text" placeholder="სახელი" name="" value=""><br
   <input type="text" placeholder="ტელეფონის ნომერი" name="" value="">
   <div class="range-slider-box">
      <div id="slider-price">
      </div>
      <!-- <input type="text" id="amount" readonly style="border:0; color:#f6931f; font-weight:bold;"> -->
   </div>

</div>

CSS

#slider-prezzo {
height: 50px;
}

.range-slider-box {
width: 80%;
position: relative;
margin: 20px 0 0 0;
}

.range-slider-box label {
margin: 10px 0 0 0;
position: absolute;
margin-left: -25px;
width: 55px;
}

.range-slider-box label:first-of-type {
margin-left: 0;
}

.range-slider-box .ui-slider {
margin: 15px 0;
}

.range-slider-box .ui-slider.ui-widget-content {
background: #fff;
}

.range-slider-box .ui-slider .ui-slider-horizontal {
height: .7em;
}

.range-slider-box .ui-slider.ui-state-disabled .ui-slider-range {
filter: inherit
}

.range-slider-box .ui-slider.ui-slider-horizontal {
height: 5px;
}

.range-slider-box .ui-slider.ui-slider-horizontal .ui-slider-handle {
margin-left: -.6em;
border-radius: 50%;
border: 3px solid #fff;
top: -7px;
}

.range-slider-box .ui-slider.ui-widget.ui-widget-content {
border: none;
}

.range-slider-box .ui-slider .ui-widget-content {
border: none;
background: #fff;
color: #333;
}

.range-slider-box .ui-slider .ui-widget-header {
border: none;
background: #3864dc;
color: #333;
}

.range-slider-box .ui-slider .ui-state-default,
.range-slider-box .ui-slider .ui-widget-content .ui-state-default,
.range-slider-box .ui-slider .ui-widget-header .ui-state-default,
.range-slider-box .ui-slider .ui-button,
html .range-slider-box .ui-slider .ui-button.ui-state-disabled:hover,
html .range-slider-box .ui-slider .ui-button.ui-state-disabled:active {
border: none;
background: #3864dc;
font-weight: normal;
color: #454545;
border-radius: 0;
}

.range-slider-box .ui-slider .ui-state-hover,
.range-slider-box .ui-slider .ui-widget-content .ui-state-hover,
.range-slider-box .ui-slider .ui-widget-header .ui-state-hover,
.range-slider-box .ui-slider .ui-state-focus,
.range-slider-box .ui-slider .ui-widget-content .ui-state-focus,
.range-slider-box .ui-slider .ui-widget-header .ui-state-focus,
.range-slider-box .ui-slider .ui-button:hover,
.range-slider-box .ui-slider .ui-button:focus {
border: none;
/*background:#575757;*/
font-weight:...

JavaScript

$(".car_brand").change(function() {
    $.get('https://demo.alagi.ge/ka/test2/'+$(this).val(), function(data) {
        obj = jQuery.parseJSON(data);
        $('.car_models').html('');
        $.each(obj, function(key, value) {
            $('.car_models').append('<option value="'+value.id+'">'+value.model+'</option>');
        });

    });
  });

  $(function() {
  var min = 6900;
  var max = 79900;
  var step = 1500;
  var range = Math.floor((max - min) / step) + 1;
  var max_calc = min + range * step;

  $("#slider-price").slider({
    range: true,
    min: 6900,
    max: max_calc,
    step: 1500,
    values: [25000, 55400],
    slide: function(event, ui) {
      var v1 = Math.min(ui.values[0], max);
      var v2 = Math.min(ui.values[1], max);
      $("#slider-price").slider("values", 0, v1);
      $("#slider-price").slider("values", 1, v2);
      $("#amount").val("$" + v1 + " - $" + v2);
    }
  }).each(function() {
    var opt = $(this).data().uiSlider.options;
    var val_min = opt.min;
    var val_max = max;
    for (var i = 0; i <= 1; i++) {
      if (i == 0) {
        var el = $('<label>' + val_min + ' €</label>').css('left', '0%');
      } else {
        var el = $('<label>' + val_max + ' €</label>').css('left', '100%');
      }
      $("#slider-price").append(el);
    }
  });
  $("#amount").val("$" + $("#slider-range").slider("values", 0) +
    " - $" + $("#slider-range").slider("values", 1));
});