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

Features

• 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.