noUiSlider is a lightweight range slider with multi-touch support and a ton of features. It supports non-linear ranges, requires no external dependencies, has keyboard support, and it works great in responsive designs.
Read more about this component at GitHub.
var basicNoUISlider = document.getElementById("basicNoUISlider");
if (basicNoUISlider) {
noUiSlider.create(basicNoUISlider, {
start: [20, 80],
snap: false,
connect: true,
range: {
min: [0],
max: [100],
},
});
}A vanilla, lightweight, configurable select box/text input plugin. Similar to Select2 and Selectize but without the jQuery dependency.
Read more about Choices.js on GitHub.
const choices = new Choices(document.querySelector(".choices-1"), {
placeholder: true,
searchPlaceholderValue: "Search",
itemSelectText: "Select",
});
const textRemove = new Choices(document.getElementById("choices-text-remove-button"), {
delimiter: ",",
editItems: true,
maxItemCount: 5,
removeItemButton: true,
});
const multipleChoices = new Choices("#choices-multiple", {
removeItemButton: true,
});
VanillaJS Datepicker is a vanilla JavaScript remake of bootstrap-datepicker.
Read more about VanillaJS Datepicker on GitHub.
const datepicker = new Datepicker(document.querySelector(".input-datepicker"), {
buttonClass: "btn",
format: "mm/dd/yyyy",
});
const datepickerAutoClose = new Datepicker(document.querySelector(".input-datepicker-autoclose"), {
buttonClass: "btn",
autohide: true,
});
const datepickerMultiple = new Datepicker(document.querySelector(".input-datepicker-multiple"), {
buttonClass: "btn",
maxNumberOfDates: 3,
});
const datepickerRange = new DateRangePicker(document.querySelector(".datepicker-range"), {
buttonClass: "btn",
}); Input masks can be used to force the user to enter data conform a specific format. Unlike validation, the user can't enter any other key than the ones specified by the mask.
Read more about imask at project's homepage.
var element = document.getElementById("isbn1");
if (element) {
var maskOptions = {
mask: "000-00-000-0000-0",
};
var mask = IMask(element, maskOptions);
}
var element = document.getElementById("currency");
if (element) {
var maskOptions = {
mask: "$ num",
blocks: {
num: {
// nested masks are available!
mask: Number,
thousandsSeparator: ",",
radix: ".",
},
},
};
var mask = IMask(element, maskOptions);
}