<!-- 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:.1,skin:"round"});

$("#rangeSlider-example").ionRangeSlider({grid:true,from:new Date().getMonth(),values:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],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');