<!-- Style -->
<link rel="stylesheet" href="vendors/select2/css/select2.min.css" type="text/css">

<!-- Javascript -->
<script src="vendors/select2/js/select2.min.js"></script>

<select class="select2-example">
  <option>Select</option>
  <option value="France">France</option>
  <option value="Brazil">Brazil</option>
  <option value="Yemen">Yemen</option>
  <option value="United States">United States</option>
  <option value="China">China</option>
  <option value="Argentina">Argentina</option>
  <option value="Bulgaria">Bulgaria</option>
</select>

$('.select2-example').select2({
    placeholder: 'Select'
});

<select class="select2-example" multiple>
  <option>Select</option>
  <option value="France">France</option>
  <option value="Brazil">Brazil</option>
  <option value="Yemen">Yemen</option>
  <option value="United States">United States</option>
  <option value="China">China</option>
  <option value="Argentina">Argentina</option>
  <option value="Bulgaria">Bulgaria</option>
</select>

<select class="select2-example">
  <option>Select</option>
  <optgroup label="Cities">
    <option value="Wonosari">Wonosari</option>
    <option value="Antipolo">Antipolo</option>
    <option value="Lesuhe">Lesuhe</option>
    <option selected value="Sunzhuang">Sunzhuang</option>
    <option value="Hongchuan">Hongchuan</option>
  </optgroup>
  <optgroup label="Countries">
    <option value="France">France</option>
    <option selected value="Brazil">Brazil</option>
    <option selected value="Yemen">Yemen</option>
    <option selected value="United States">United States</option>
    <option value="China">China</option>
    <option value="Argentina">Argentina</option>
    <option value="Bulgaria">Bulgaria</option>
  </optgroup>
</select>

<!-- Style -->
<link rel="stylesheet" href="vendors/range-slider/css/ion.rangeSlider.min.css" type="text/css">

<!-- Javascript -->
<script src="vendors/range-slider/js/ion.rangeSlider.min.js"></script>

<input type="text" id="rangeSlider-example">

$("#rangeSlider-example").ionRangeSlider({
    min: 100,
    max: 1000,
    from: 550,
    skin: "round"
});

$("#rangeSlider-example").ionRangeSlider({
    type: "double",
    grid: true,
    min: 0,
    max: 1000,
    from: 200,
    to: 800,
    prefix: "$",
    skin: "round"
});

$("#rangeSlider-example").ionRangeSlider({
    type: "double",
    grid: true,
    min: -1000,
    max: 1000,
    from: -500,
    to: 500,
    step: 250,
    skin: "round"
});

$("#rangeSlider-example").ionRangeSlider({
    type: "double",
    grid: true,
    min: -12.8,
    max: 12.8,
    from: -3.2,
    to: 3.2,
    step: 0.1,
    skin: "round"
});

$("#rangeSlider-example").ionRangeSlider({
    grid: true,
    from: new Date().getMonth(),
    values: [
        "فروردین", "اردیبهشت", "خرداد", "تیر", "مرداد", "شهریور",
        "مهر", "آبان", "آذر", "دی", "بهمن", "اسفند"
    ],
    skin: "round"
});

$("#rangeSlider-example").ionRangeSlider({
    min: 0,
    max: 10000,
    from: 777,
    step: 1, // default 1 (set step)
    grid: true, // default false (enable grid)
    grid_num: 4, // default 4 (set number of grid cells)
    grid_snap: false, // default false (snap grid to step)
    skin: "round"
});

<!-- Style -->
<link rel="stylesheet" href="vendors/tagsinput/bootstrap-tagsinput.css" type="text/css">

<!-- Javascript -->
<script src="vendors/tagsinput/bootstrap-tagsinput.js"></script>

<input type="text" class="form-control tagsinput-example" placeholder="Tags" value="HTML5, CSS3, JavaScript, Laravel">

$("input.tagsinput-example").tagsinput('items');

<!-- Javascript -->
<script src="vendors/input-mask/jquery.mask.js"></script>

<input type="text" data-input-mask="phone" class="form-control" placeholder="(555) 555-5555">

$('[data-input-mask="phone"]').mask('(000) 000-0000');

<input type="text" data-input-mask="date" class="form-control" placeholder="2019/12/05">

$('[data-input-mask="date"]').mask('0000/00/00/');

<input type="text" data-input-mask="time" class="form-control" placeholder="00:00:00">

$('[data-input-mask="time"]').mask('00:00:00');

<input type="text" data-input-mask="money" class="form-control" placeholder="54,28">

$('[data-input-mask="money"]').mask('#.##0,00', {reverse: true});

<input type="text" data-input-mask="ip_address" class="form-control" placeholder="192.168.544.444">

$('[data-input-mask="ip_address"]').mask('099.099.099.099');