JSFiddle - React, Tailwind, and code Playground

by Vasilii Chugunov

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div class="container">
  <div class="row">
    <div class="col">
      Выбор колонок для отображения<br/>
      <div class="input-group">
        <select multiple>
          <option value="1">ФИО</option>
          <option value="2">текст 2</option>
          <option value="3">текст 3</option>
        </select>
      </div>
      Соответствие<br/>
      <div class="input-group">
        <input type="text">
        <select>
          <option value="1">Клиент</option>
          <option value="2">Менедждер</option>
          <option value="3">текст 3</option>
        </select>
      </div>
    </div>
    <div class="col">
        <div class="input-group-text">
          <input type="checkbox" aria-label="Checkbox for following text input">
          <span>Text input with checkbox</span>
        </div>
        
      <div class="input-group">
        <input type="checkbox"> Текст
      </div>
      <div class="input-group">
        <input type="checkbox"> Текст
      </div>
      <div class="input-group">
        <input type="checkbox"> Текст
      </div>
    </div>
    <div class="col">
      <div class="form-group">
        <label for="formControlRange">Возраст (25)</label>
        <div class="range-wrapper">
          <span>18</span><input type="range" class="form-control-range" id="formControlRange" min="18" max="70" value="25" step="1" multiple><span>70</span>
        </div>
        <div id="slider-range"></div>
      </div>
    </div>
 ...

CSS

.range-wrapper {
  display: flex;
}

JavaScript

$('#formControlRange').change(function() {
	//alert($(this).val())
  
});

$( "#slider-range" ).slider({
  range: true,
  min: 0,
  max: 500,
  values: [ 75, 300 ],
  slide: function( event, ui ) {
    $( "#amount" ).val( "$" + ui.values[ 0 ] + " - $" + ui.values[ 1 ] );
  }
});
$( "#amount" ).val( "$" + $( "#slider-range" ).slider( "values", 0 ) +
                   " - $" + $( "#slider-range" ).slider( "values", 1 ) );