vanilla-rangeslider

    1.0.0 • Public • Published

    Vanilla Javascript 💅

    Description

    • Removed the jQuery requirement from the original ion.rangeSlider (Version: 2.3.1)
    • Removed IE8 Support (if this is a big deal, let me know)
    • Additional/Original skins can be found in the css here
    • For full documentation visit the original ion.rangeSlider as everything will work the same except the initializers (see the documentation below).

    ion.rangeSlider

    Dependencies

    • None 🤯

    Usage

    Add the following libraries to the page:

    • rangeSlider.min.js

    Add the following stylesheets to the page:

    • rangeslider.min.css

    Install with NPM

    Use NPM to download latest version of a plugin and install it directly in to your project.

    • npm install vanilla-rangeslider

    Initialisation

    The slider overrides a native text input element.

    <input type="text" id="example_id" name="example_name" value="" />

    To initialise the slider, call ionRangeSlider on the element:

    ionRangeSlider('#example_id');

    Creating slider (all params)

    An example of a customised slider:

    ionRangeSlider('#example_id', {
        min: 0,
        max: 5000,
        prefix: "$",
        grid: true,
        grid_num: 5,
        step: 100,
    });

    You can also initialise slider with data-* attributes of input tag:

    data-min="0"
    data-max="10000"
    data-from="1000"
    data-to="9000"
    data-type="double"
    data-prefix="$"
    data-grid="true"
    data-grid-num="10"

    Public methods

    To use public methods, at first you must save slider instance to variable:

    // Store slider into a variable
    const myRangeSlider = ionRangeSlider('#example_id', {
        type: "double",
        min: 0,
        max: 1000,
        from: 200,
        to: 500,
        grid: true
    });
     
    // UPDATE - updates slider to any new values
    myRangeSlider.update({
        from: 300,
        to: 400
    });
     
    // RESET - reset slider to it's inital values
    myRangeSlider.reset();
     
    // DESTROY - destroys slider and restores original input field
    myRangeSlider.destroy();

    Support Ion-series plugins development

    ☝️Support the originator

    but think of me 🤵

    Buy Me A Coffee

    Install

    npm i vanilla-rangeslider

    DownloadsWeekly Downloads

    105

    Version

    1.0.0

    License

    MIT

    Unpacked Size

    101 kB

    Total Files

    8

    Last publish

    Collaborators

    • keisto