A Multi-Range Slider Control In Vanilla JavaScript | omni-slider

omni-slider is a JavaScript implementation of a slider for selecting a numeric value or a range. The slider is horizontal and can be performed with one or two handles.

multi thumb slider, two thumb slider, html double range slider, html range slider with 2 handles, range slider javascript, range slider with input box

A Modern And Customizable Range Slider In Vue.js 3 and TypeScript


  • Two sliding knobs for digital range setting
  • Single handle sliding from left/minimum to right/maximum
  • Touch and mouse ability
  • Currency (number type) or date (date type)
  • Assigned minimum and maximum values
  • Pub / sub-app for each country in operation
  • Overlap and touch each other for the final state
  • Set the initial position of the handles in advance
  • Push data to the slider (set value)
  • Can be disabled
  • The layout can be changed with CSS (see fly.css inside demo folder)

Supported Browsers

  • IE9
  • IE11
  • Chrome
  • Safari
  • Mobile Safari
  • Android Default Browser

How to make use of it:

Add JavaScript and CSS files in the global slider to your web page.

<link rel="stylesheet" href="omni-slider.css">
<script src="omni-slider.js"></script>

JavaScript to create the baseband slider inside the container demo.

var element = document.getElementById('demo');
var options = {
      // options here
var mySlider = new Slider(element, options);

Customization options with default values.

// slider only has one handle
isOneWay: false,

// returns a date object
isDate: false,

// handles will overlap or just sit next to each other
overlap: true,

// generic callback function is provided to apply to the value of the Slider
callbackFunction: function(){},

// Lower bounds of the slider 
min: null,

// Upper bounds of the slider 
max: null,

// Initial starting position of the left hand slider
start: null,

// Initial starting position of the right hand slider
end: null

Event listeners.

var mySlider = new Slider(element, options);

var harry = mySlider.subscribe('start', function(data) {
    // triggers when the handle is selected
    console.log('harry ' + data.left);

var potter = mySlider.subscribe('moving', function(data) {
    // triggers when the handle is being moved
    console.log('potter ' + data.right);

var data = mySlider.subscribe('stop', function(data) {
    // triggers when the handle is released

Dual-thumb Slider Control, omni-slider Plugin/Github, range slider with min and max values

See Demo And Download

Official Website(priceline): Click Here

This superior jQuery/javascript plugin is developed by priceline. For extra Advanced Usages, please go to the official website.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…