Press "Enter" to skip to content

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

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.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *