noUiSlider is a lightweight JavaScript range slider library with full multi-touch support. It fits wonderfully in responsive designs and has no dependencies.

Related tags

Sliders component input range-slider
Overview

noUiSlider

noUiSlider is a lightweight JavaScript range slider.

  • No dependencies
  • All modern browsers and IE > 9 are supported
  • Fully responsive
  • Multi-touch support on Android, iOS and Windows devices
  • Accessible with aria and keyboard support
  • Tons of examples and answered Stack Overflow questions

License

noUiSlider is licensed MIT.

It can be used for free and without any attribution, in any personal or commercial project.

Documentation

An extensive documentation, including examples, options and configuration details, is available here:

noUiSlider documentation.

Contributing

See Contributing.

Sponsorship

noUiSlider is a stable project that still receives a lot of feature requests. A lot of these are interesting, but require a good amount of effort to implement, test and document. Sponsorship of this project will allow me to spend some more of my time on these feature requests.

Please consider sponsoring the project by clicking the " ❤ Sponsor" button above. Thanks!

Tooling

Cross-browser testing kindly provided by BrowserStack.

Tested with BrowserStack

Comments
  • Exponentially increase range

    Exponentially increase range

    Hello and well done on your excellent work on this plugin!

    It would be real nice if we could have exponential increase of the range values, meaning, if there's a huge price range for example 0-2.000.000, the first values would start in steps of 1 and as the range reaches it's end it should be in steps of 10.000.

    In other words, variable steps. So, you would define multiple percentage values between which you could set a different step OR define points of range values in percentage width and give the value there.

    Much like how ebay price-range works for example!

    Feature 
    opened by scooterlord 52
  • Bug on handle positioning at 100%

    Bug on handle positioning at 100%

    Hi, my first comment on github! If im wrong about this im sorry.

    In line 507-508:

    // Limit 'to' to 0 - 100 to = to < 0 ? 0 : to > 100 ? 100 : to;

    When the handle is moved to the max, the CSS goes something like: left: 100%; because of that conditional.

    The problem is that the handle is starting at 100%, so.. outside of the container.

    Example: If i have a slider bar of 300px width with a handle of 20px width, i expect this:

    0% = left: 0px; 50% = (sliderWidth/2 - handleWidth/2) = (300/2 - 20/2) = left: 140px; 100% = (sliderWidth - handleWidth) = (300 - 20) = left: 280px;

    However, at 100% the handle is starting at 300px, placing it outside and having a total width of 320px;

    I tried to fix it and upload the changes but no success.

    Thanks.

    opened by felixjet 42
  • Add

    Add "update" method.

    I don't know how to modify options on the fly.

    According to http://stackoverflow.com/a/6006388/1678191

    some jQuery plugins offering a update mechanism like

    $("#foo").coolPlugin("update",{someOption:1});

    Is there some similar mechanism implemented in noUiSlider ?

    opened by elvenking 34
  • Adds support more than two handles on one slider (and fixes a minor step interface bug)

    Adds support more than two handles on one slider (and fixes a minor step interface bug)

    Thanks for a great library - working on it has improved my meagre javascript skills!

    Fixes #507 and #474 by adding support for multiple handles on the same slider.

    Also, I noticed that the steps interface, as used in the examples, didn't work quite right for nonlinear sliders where the length of a range wasn't always a multiple of the range's steps. There's a unit test to show what I mean.

    Feature 
    opened by michaeltandy 24
  • no compiled version of your script in the repo for bower

    no compiled version of your script in the repo for bower

    Hey

    Thanks for an awesome package, the recent 'pips' addition is great :)

    I just updated your package with bower and the compiled versions of your script appear to be removed from the repo, and the only way I can get at them are from the downloadable zip.

    This is causing me issues - if it's not installed via bower it doesn't get picked up by my automated build process. (supposedly bower will install zips but it doesn't work for me).

    Please add them back in, and add a 'main' link in bower.json. Cheers!

    opened by daviestar 22
  • Current version does not work at all?

    Current version does not work at all?

    _Note for search-engine visitors:_ None of the problems and issues described here are relevant to the current version of noUiSlider, as it got a massive update. Find it here: documentation.

    _Original post:_

    When I saw your page and all these sliders, I immediately felt in love with noUiSlider. I even wrote a quick article about it (not yet published), without even trying it. And that was a mistake, as either I'm blind / I'm doing something really, really wrong or current version of your slider does not work at all.

    Generated slider is invisible. Upon checking page, I clearly see, that main div has width set to 100% and height to 0px. While a inside it has both width and height set to 0px.

    At first, I thought, that this is because I packed it into mobile application and something is wrong with pixel-per-inch setting. Or, that it interfere somehow with Twitter Bootstrap, that I use. Or, there are million reasons on my side, that caused this to not work.

    But then, I've created sample document, as simple as:

    <!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <link href="nouislider-3.2.1.min.css" rel="stylesheet" />
        <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="nouislider-3.2.1.min.js"></script>
    </head>
    <body>

        <div id="positionSlider"></div>

        <script type="text/javascript">
        /*<![CDATA[*/
            $(function($)
            {
                $("#positionSlider").noUiSlider
                ({
                    range: [0, 100],
                    start: 50,
                    handles: 1,
                    connect: "lower"
                });
            });
        /*]]>*/
        </script>

    </body>

</html>

    I feed it with files found at GitHub and official minified jQuery 1.9.1 release.

    Then I tested it in Chrome 28, Internet Explorer 10 and Firefox 22. None of these browsers was able to display your slider correctly and dev tools on-board all of these browsers has reported, that your slider is indeed created, but it is sized to 0 pixels.

    I even forced myself to do things as weird as:

        $("#positionSlider").noUiSlider
    ({
        range: [0, 100],
        start: 50,
        handles: 1,
        connect: "lower"
    });

    $('#positionSlider a').css('width', '100%');
    $('#positionSlider a').css('height', '8px');

    But this also hasn't brought any result. Size of your slider is non-zero, but it contents remains empty (invisible) -- for the reasons beyond my imagination.

    I tried to replace github-versions of files with the one on your website (were sliders are working just fine), but again, without any luck.

    As a last example of despair, I saved local copy of your website. In the result, I got sliders at least visible, but with many visual errors (two knobs, where there should be one and three of four, where there should be two) and partially-non working (additional knobs, that appears in center of each slider are not draggable / movable).

    See picture below:

    Screenshot

    As I wrote, I really enjoy your library, and I would like to use it as much as possible. But currently, it isn't possible, as it isn't working at all (at least for me). I really would like to know, what am I missing or doing wrong, and why does this works perfectly on your website, but fails completely locally, on any project, that I tested it with?

    opened by trejder 22
  • Allow custom step values

    Allow custom step values

    The current step option, allows for linear values in the slider. It would be nice if the slider allowed a custom array of values. I can think of two use cases for this option:

    1. A slider with non-linear numeric values, eg: 100, 200, 500, 1000, 2000, 5000, 10000
    2. A slider with non-numeric values (I know, a bit extreme), eg: "never", "rarely", "sometimes", "often"

    Both cases can be implemented with a custom slide function, but it would be nice if this functionality was built-in. Here's a jsfiddle with the above examples: http://jsfiddle.net/KheWe/

    Feature 
    opened by teoulas 22
  • Add classes to handles

    Add classes to handles

    If you have a slider with two handles, there's no way to target them individually - they're both just a <div>.

    Could you add .slider-from and .slider-to (or similar) classes to these handles to allow this?

    opened by AlecRust 21
  • Serious bug when using multiple sliders on chrome (v 51.0.2704.84)

    Serious bug when using multiple sliders on chrome (v 51.0.2704.84)

    Hi Leon, First I like to embrace the hard work your put on this project, it is awesome and exactly what I was looking for, Unfortunately I found a serious bug that I cannot resolve, When I try to put multiple sliders (could be only two) so when moving the handlers on the second slider - it interrupts the handlers the first one.. I was trying for hours to address this bug inside your code but without success.. Please let me know if you're familiar with this bug and have any idea how to solve it, Just open it on chrome (v 51) and see that the bug occurs also on your demo page as well (https://refreshless.com/nouislider/). I will be happy for any idea you can give why it happens so I can fix it myself..... Thanks and all best,Eran

    opened by carmel-6000 19
  • `Uncaught Error: Slider was already initialized` when trying to create a slider from a cloned element

    `Uncaught Error: Slider was already initialized` when trying to create a slider from a cloned element

    Hi,

    Sorry if this has been asked already. What's the proper way to clone the slider dynamically?

    If you run the example below, you'll see the slider event binding does not work while the element is cloned. If the line new_slider.noUiSlider( options ); is uncommented, it gets the error Uncaught Error: Slider was already initialized.

    <html>
    <head>

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <link href="jquery.nouislider.min.css" rel="stylesheet">
        <script src="jquery.nouislider.all.min.js"></script>        
        <style>
            .buttons {
                margin: 1em 1em 1em 0;
            }
            .button { 
                border: 1px solid #ccc; 
                width: 16px;
                height: 16px;
                padding: 0.24em 0.6em;
                font-size: 1.4em;
            }
            .slider-container {
                width: 300px;
            }
        </style>
    </head>
    <body>


        <div class='slider-container'>
            <div class='buttons'>
                <span class='button minus'>-</span><span class='button plus'>+</span>
            </div>        
            <div class='slider' id='slider-test_1' ></div>
        </div>



    </body>
    <script>
        $( document ).ready( function(){

            var increment_id = function( id ) {            
                return id.replace( /_(\d)/g, function ( entire_match, m0 ) {
                    return '_' + ( Number( m0 ) + 1 );              
                });         
            }
            var decrement_id = function( id ) {            
                return id.replace( /_(\d)/g, function ( entire_match, m0 ) {
                    return '_' + ( Number( m0 ) + 1 );              
                });         
            }        

            var options = {
                start: [20, 80],
                range: {
                    'min': [ 0 ],
                    'max': [ 100 ]
                }
            };

            $( "#slider-test_1" ).noUiSlider( options );                             
            $( '.plus' ).on( 'click', function() {
                console.log( 'clicked' );
                var container = $( this ).closest( '.slider-container' ).first();
                var new_container = container.clone( true );
                var new_slider = new_container.find( '.slider' ).first();
                new_slider.attr( 'id', increment_id( container.find( '.slider' ).first().attr( 'id' ) ) );
                // new_slider.noUiSlider( options );
                container.after( new_container );
            } );
            $( '.minus' ).on( 'click', function() {
                $( this ).closest( '.slider-container' ).first().remove();

            } );            
        });


    </script>

</html>
    opened by onet4 19
  • Min = max

    Min = max

    I know this is an edge case - I'm using noUiSlider as a filter on a product listing (think Amazon). The [min] and [max] are based dynamically on the result set.

    When the result set is filtered to a single item, [min] and [max] are the same, and the slider behaves oddly (it's supposed to be a 2-handle slider):

    ss1

    There's some error handling I could add on my side, but I'm wondering if it's worth building this edge-case into noUiSlider itself? E.g. something like

    ss2

    Feature 
    opened by mgibbs189 19
  • Install via NPM return error Uncaught ReferenceError: noUiSlider is not defined but via CDN works fine

    Install via NPM return error Uncaught ReferenceError: noUiSlider is not defined but via CDN works fine

    I installed it via NPM in laravel and imported:

    import nouislider from 'nouislider';
window.noUiSlider = nouislider;

    And this way does not work, it returns: Uncaught ReferenceError: noUiSlider is not defined

    But if I import via: <script src="https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/15.6.1/nouislider.min.js"></script>

    It works perfectly. What could be happening to not work via NPM?

    image

    Support 
    opened by Geovanek 1
  • Accessing old value in update event

    Accessing old value in update event

    I would like to check on update whether the value increased or decreased. There does not seem a way to do this without tracking state separately, as this.get() already returns the new value.

    Furthermore, it would be good to mention in https://refreshless.com/nouislider/events-callbacks/#section-binding that this won't be set if you use a lambda:

            slider.noUiSlider.on('update', (values, handle) => {
          console.log(this)
        })

    While this works:

            slider.noUiSlider.on('update', function(values, handle) {
          console.log(this)
        })
    Documentation 
    opened by xeruf 0
  • Disable tabindex when slider is disabled

    Disable tabindex when slider is disabled

    When I call slider.setAttribute('disabled', true), I can still focus handles (but I cannot move them, as expected). Ideally, they would not be focusable anymore. Sadly, keyboardSupport is not among options which I could update to do this manually, either, when disabling the slider.

    Bug 
    opened by mitar 1
  • Add support for connecting to a value rather than just between handles

    Add support for connecting to a value rather than just between handles

    As part of a migration effort from AngularJS to Angular 14, we have begun using this project in place of rzSlider. rzSlider had a number of useful features such as automatic detection (and resolution) of tooltip/label collisions and highlighting between the slider handle and an arbitrary value.

    #371 discussed a solution for highlighting from the center of the slider, but my needs are more robust than that, as I need to highlight from potentially any arbitrary value to the current handle value. Specifically, this is being used in a "playback progress" indicator similar to the track bar in a media player that shows how far into the song you are. In my application, the user can loop from any start and stop position, and I'd like to highlight only from the user-selected start position to the handle showing the current position in the track.

    I created a JSFiddle to show my workaround, which I think is slightly more elegant than the documented solution to #371: https://jsfiddle.net/iamtheddrman/f01tde47/7/

    In short, I create a handle at the desired start position and one at the "current" position, then disable and hide the start position handle.

    This achieves the desired effect for my read-only slider, but it is definitely not my favorite code nor robust enough for interactive sliders. If something like this could be integrated into the tool itself, that would be fantastic.

    Feature 
    opened by iamtheddrman 1
  • Chrome Lighthouse - Accessibility: ARIA input fields do not have accessible names

    Chrome Lighthouse - Accessibility: ARIA input fields do not have accessible names

    opened by USMortality 2
Releases(15.6.1)

  • 15.6.1(Aug 12, 2022)

  • 15.6.0(May 1, 2022)

  • 15.5.1(Jan 21, 2022)

  • 15.5.0(Oct 9, 2021)

    • Fixed: Compositing issues in Safari [this is a Potential BC-break when using a custom stylesheet!] (#987, #998, #1029, #1154);
    • Changed: divisibility of margin, padding and limit by step is no longer enforced (#1163);
    Source code(tar.gz)
    Source code(zip)

  • 15.4.0(Aug 14, 2021)

    • Added: handleAttributes option (#1019);
    • Added: drag-all behaviour (#756, #841, #1116);
    • Added: ESM/ES6 module distribution dist/nouislider.mjs (#1149);
    • Added: support for ranges where min = max (#236, #359, #578, #633, #676, #790);
    • Added: getPositions method;
    • Fixed: Duplicate change/set events when using snap behaviour (#1106);
    Source code(tar.gz)
    Source code(zip)

  • 15.3.0(Aug 10, 2021)

  • 15.2.0(Jun 15, 2021)

    • Added: unencoded boolean argument to get method to return raw slider values (#1145);
    • Added: support for "partial" formatters in pips.format, ariaFormat and tooltips options (#1140);
    Source code(tar.gz)
    Source code(zip)

  • 15.1.1(May 20, 2021)

  • 15.1.0(May 9, 2021)

  • 15.0.0(May 2, 2021)

    • noUiSlider is now written and distributed as TypeScript;
    • Types are now provided. If you are currently using @types/nouislider, this should be replaced;
    • The distributed files have moved from distribute to dist in the NPM package, and are no longer in the repository; You may need to change the path to the noUiSlider CSS file if you are importing it using a package manager;
    • Fixed: Slider now properly works in multiple layers of Shadow DOM (#1121);
    • Removed: version from exceptions and export;
    • Removed: Bower support;
    Source code(tar.gz)
    Source code(zip)

  • 14.7.0(Apr 6, 2021)

  • 14.6.4(Mar 18, 2021)

  • 14.6.3(Nov 19, 2020)

  • 14.6.2(Sep 16, 2020)

    • Fixed: Ignore erroneous mouse events on taps for iOS 13.4 (#1095);
    • Added: exactInput argument to set and setHandle methods (#436, #1094);
    Source code(tar.gz)
    Source code(zip)

  • 14.6.1(Aug 17, 2020)

  • 14.6.0(Jun 27, 2020)

  • 14.5.0(May 11, 2020)

  • 14.4.0(May 6, 2020)

  • 14.3.0(May 5, 2020)

    • Added: Default cssClasses are now exposed and can be modified;
    • Fixed: Destroying sliders with multiple classes in cssClasses fails (#1069);
    Source code(tar.gz)
    Source code(zip)

  • 14.2.0(Mar 27, 2020)

    • Added: Slider api as event parameter (#1058);
    • Added: Allow multiple classes in cssClasses option (#1054);
    • Fixed: Slider not working within shadow DOM (#1060);
    • Fixed: Last pip not rendered if it is also the first and at the slider edge (#1063);
    Source code(tar.gz)
    Source code(zip)

  • 14.1.1(Dec 15, 2019)

  • 14.1.0(Dec 4, 2019)

    • Fixed: Styling requires a root html node, so noUiSlider can't be used in shadow dom (#1035);
    • Added: Support for PageUp/PageDown and Home/End keys in keyboard support (#1036);
    Source code(tar.gz)
    Source code(zip)

  • 14.0.3(Oct 10, 2019)

  • 14.0.2(Jun 28, 2019)

  • 14.0.1(Jun 21, 2019)

  • 14.0.0(Jun 20, 2019)

    • Fixed: change & slide events should fire on keyboard control (#994);
    • Fixed: .noUi-origin overflows document on vertical sliders (#987);
    • Fixed: Clicking to right of handle doesn't move it when it's at the same point as another (#965);
    • Added: Additional documentation on number formatting (#978, #985);
    Source code(tar.gz)
    Source code(zip)

  • 13.1.5(Apr 24, 2019)

  • 13.1.4(Mar 20, 2019)

  • 13.1.3(Mar 15, 2019)

    • Fixed: Keyboard interaction allows handles to "push" other handles (#960);
    • Fixed: Update event fires for all handles during keyboard interaction (#960);
    Source code(tar.gz)
    Source code(zip)

  • 13.1.2(Mar 13, 2019)

Owner
Léon Gersen
Léon Gersen
GitHub https://refreshless.com/nouislider/
jQuery only range slider

Ion.RangeSlider. Is an easy, flexible and responsive range slider with tons of options. Version: 2.3.1 | Version 3.x is under development now Project

Denis Ineshin 2.5k Dec 25, 2022
A jquery UI range selection slider that supports dates

jQRangeSlider, jQDateRangeSlider & jQEditRangeSlider A javascript slider selector that supports dates and touch devices Home page Documentation Suppor

Guillaume Gautreau 676 Sep 24, 2022
🎚 HTML5 input range slider element polyfill

rangeslider.js Simple, small and fast jQuery polyfill for the HTML5 <input type="range"> slider element. Check out the examples. Touchscreen friendly

André Ruffert 2.2k Jan 8, 2023
Most modern mobile touch slider with hardware accelerated transitions

Get Started | Documentation | Demos Swiper Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing

Vladimir Kharlampidi 33.7k Jan 9, 2023
An awesome, fully responsive jQuery slider plugin

FlexSlider 2.7.2 http://www.woocommerce.com/flexslider/ - Copyright (c) 2015 WooThemes Releases The master branch of this repository is always the lat

WooCommerce 4.9k Jan 3, 2023
:snowboarder: A responsive slider jQuery plugin with CSS animations

A responsive slider jQuery plugin with CSS animations Animations from animate.css Online demo Visit plugin website. Appszoom for developers also uses

Joan Claret 58 Dec 12, 2022
:leaves: Touch, responsive, flickable carousels

Flickity Touch, responsive, flickable carousels See flickity.metafizzy.co for complete docs and demos. Install Download CSS: flickity.min.css minified

Metafizzy 7.2k Jan 4, 2023
A dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more

Glide.js is a dependency-free JavaScript ES6 slider and carousel. It’s lightweight, flexible and fast. Designed to slide. No less, no more What can co

null 6.7k Jan 7, 2023
OlumSlider is a lightweight and flexible slider, written via vanilla js

olum-slider OlumSlider is a lightweight and flexible slider, written via vanilla js Documentation CDN <!DOCTYPE html> <html lang="en"> <head> <t

Olumjs 0 Oct 8, 2021
A jQuery plugin for a slider with adaptive colored figcaption and navigation.

Adaptive Slider jQuery Plugin A jQuery plugin for a slider with adaptive colored figcaption and navigation. This plugin will take a list of figure ele

null 53 Jan 3, 2023
JavaScript library for one-directional scrolling with item based navigation support.

Sly JavaScript library for one-directional scrolling with item based navigation support. Sly supports navigation with: mouse wheel scrolling scrollbar

null 2.9k Dec 23, 2022
The responsive CSS animation framework for creating unique sliders, presentations, banners, and other step-based applications.

Sequence.js The responsive CSS animation framework for creating unique sliders, presentations, banners, and other step-based applications. Sequence.js

Ian Lunn 3.4k Dec 20, 2022
A lightweight carousel library with fluid motion and great swipe precision

Embla Carousel Embla Carousel is a bare bones carousel library with great fluid motion and awesome swipe precision. It's library agnostic, dependency

David 2.8k Jan 4, 2023
🎨 A simple library for extracting dominant colors from images.

A dead simple, zero-dependency, promise-based javascript library for extracting the dominant color(s) from an image (in the browser). ?? Version 2 was

Brian Gonzalez 1.7k Jan 4, 2023
JavaScript image gallery for mobile and desktop, modular, framework independent

PhotoSwipe Repository JavaScript image gallery for mobile and desktop. Documentation and getting started guide. Demo and script home page. NPM npm ins

Dmitry Semenov 22.5k Dec 30, 2022
It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

impress.js It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prez

impress.js 37.1k Jan 3, 2023
It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

impress.js It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prez

impress.js 37.1k Jan 3, 2023
Vegas is a jQuery/Zepto plugin to add beautiful backgrounds and Slideshows to DOM elements.

Vegas – Backgrounds and Slideshows Vegas is a jQuery/Zepto plugin to add beautiful backgrounds and Slideshows to DOM elements. Important note: Vegas 2

Jay Salvat 1.8k Jan 7, 2023
Strut - An Impress.js and Bespoke.js Presentation Editor

All new development is happening in Strut2 Strut2 is currently private until we further solidify our "open source dividened program." Open Source Divd

Matthew Wonlaw 1.7k Dec 30, 2022