Neil Patrick's Mansion

    omni-slider

    1.2.1 • Public • Published

    omni-slider

    This is a JavaScript implementation of a slider to select a numeric value or a range. The slider is horizontal and can be implemented with one handle or two. Following are some technical details for the omni-slider:

    • Vanilla JS
    • 9.34 KB minified
    • 18.86 KB unminified

    Demo

    Three ways to try out the Priceline omni-slider:

    • Use it to live search at priceline.com
    • View the functionality on our demo page
    • Download the demo with the omni-slider source file ZIP

    Features

    • Two handle sliding to select a numeric range
    • One handle sliding from left/minimum to right/maximum
    • Touch and mouse capability
    • Currency (typeof Number) or Date (typeof Date)
    • Custom minimum and maximum values
    • Pub/sub implementation for each state in the process
    • Overlap and touching each other for final state
    • Preset the initial location of the handles
    • Push data into slider (setting the value)
    • Can be disabled
    • Can change design using css (see fly.css inside demo folder)

    Supported Browsers

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

    Using the Slider

    Declare the slider

    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="omni-slider.css">
    <script type="text/javascript" src="es5-shim.js"></script>
    <script type="text/javascript" src="omni-slider.js"></script>
    var element = document.getElementById('harryPotter');
    var options = {
        isDate: false,
        min: 3,
        max: 1980,
        start: 7,
        end: 31,
        overlap: false
    };
    var mySlider = new Slider(element, options);
    </script>

    new Slider(elementContainer, options)

    Defines the slider features:

    • one handle (minimum/maximum) or two handle (range)
    • currency or date

    <elementContainer>

    • expects a div DOM element or node that acts as a wrapper for the slider
    • all of the slider's DOM elements will be transcluded inside the <elementContainer> provided

    <options>

    • must be of type object
    • defines the following currently supported slider options
      • isOneWay - Boolean, denotes if slider only has one handle
      • isDate - Boolean, denotes if returning a date object
      • overlap - Boolean, denotes if handles will overlap or just sit next to each other
      • callbackFunction - Function, denotes if a generic callback function is provided to apply to the value of the Slider
      • min - Lower bounds of the slider (if isDate true typeof String [yyyy-mm-ddThh:mm] else typeof Number)
      • max - Upper bounds of the slider (if isDate true typeof String [yyyy-mm-ddThh:mm] else typeof Number)
      • start - Initial starting position of the left hand slider (if isDate true typeof String [yyyy-mm-ddThh:mm] else typeof Number)
      • end - Initial starting position of the right hand slider (if isDate true typeof String [yyyy-mm-ddThh:mm] else typeof Number)

    <elementContainer> - is the div container element

    <options> - can be defined to customize the slider

    Add listeners

    var mySlider = new Slider(element, options);
    var harry = mySlider.subscribe('start', function(data) {
        console.log('harry ' + data.left);
    });
    var potter = mySlider.subscribe('moving', function(data) {
        console.log('potter ' + data.right);
    });
    var data = mySlider.subscribe('start', function(data) {
        console.log(data);
    });
    potter.remove();
    var hermione = mySlider.subscribe('moving', function(data) {
        console.log('hermione ' + data.right + data.left);
    });

    Slider.prototype.subscribe(topic, listener)

    topic (type String)

    • start - triggers when the handle is selected
    • moving - triggers when the handle is being moved
    • stop - triggers when the handle is released

    listener (type Function)

    • will receive the result of Slider.prototype.getInfo() as an argument
    • will be called with the argument (above) once the topic has been fired/published

    returns

    • an object with accessor method remove() which removes the listener from binding to the topic

    Preset a slider value

    This can be used to preset a handle at a specific value upon initially generating the page or it can move a slider handle based on value typed in a field. It also initially checks whether the handles are overlapping and for other built-in features.

    // Two Way
    var mySlider = new Slider(... , {isOneWay: false});
    var data = {
        left: 7,
        right: 31
    };
    mySlider.move(data);
     
    // One Way
    var myOneWaySlider = new Slider(... , {isDate: true, isOneWay: true});
    myOneWaySlider.move(new Date('1980-07-31'));

    Slider.prototype.move(data, preventPublish)

    data

    • type object for two way sliders or number for one way sliders
    • if it is an object it should be constructed:

    left

    • value of the left handle of the slider
    • can be a date object if slider isDate === true or a floating point number otherwise

    right

    • value of the right handle of the slider
    • can be a date object if slider isDate === true or a floating point number otherwise

    preventPublish

    • type boolean
    • if true then it won't publish the moving topic otherwise it will

    Reverse of Slider.prototype.getInfo() in terms of data provided. If you are setting a two way slider then you pass in an object otherwise if it is a one way slider you only pass in a value.

    Extract slider values

    Example for a two handle slider

    var mySlider = new Slider(...);
    var data = mySlider.getInfo();
    console.log(data.left); // left handle value
    console.log(data.right); // right handle value

    If it is a one handle slider, then it will return just the value rather than an object. In this case, the value is calculated from the left handle rather than the fill.

    Slider.prototype.getInfo()

    Essentially the data for the slider is always available since the slider-fill is made up of percentages. slider.getInfo() merely extracts the said percentages and generates a human-readable value based on the context of the application (either date or currency). Slider.getInfo() returns an object with left and right properties.

    left

    • value of the left handle of the slider
    • can be a date object if slider isDate === true or a floating point number otherwise

    right

    • value of the right handle of the slider
    • can be a date object if slider isDate === true or a floating point number otherwise

    Disable the slider

    var disabledSlider = new Slider(document.getElementById('disabledSlider'), {
        overlap: true
    });
    disabledSlider.disable(true);

    Slider.prototype.disable

    Makes the slider handle unmovable

    Development

    To develop new features on top of this slider first download and build it with dependencies listed in package.json.

    npm install
    npm start
    

    Known Issues

    • Chrome Device Emulator does not allow us to bind touchmove to the document (i.e. document.addEventListener('touchmove', this.movingHandler, true);).

    Workaround: disable emulate touch screen under Emulation at the bottom tabs of dev tools

    • Provided style sheet is a .css file not a .scss file so if the build process does not import .css it won't get taken.

    Workaround: rename the .css file into .scss

    License

    omni-slider is released under the MIT license.

    Install

    npm i omni-slider

    DownloadsWeekly Downloads

    1,080

    Version

    1.2.1

    License

    MIT

    Last publish

    Collaborators

    • pricelinelabs