Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Current version does not work at all? #93

Closed
trejder opened this issue Jul 24, 2013 · 21 comments

Comments

Projects
None yet
6 participants
@trejder
Copy link

commented Jul 24, 2013

_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?

@zambadu

This comment has been minimized.

Copy link

commented Jul 26, 2013

Same problem here. Nothing to see. The library does insert some nodes but they are empty and also there are no styles working on these nodes. Maybe there is missing a class on initializing the slider?

@zambadu

This comment has been minimized.

Copy link

commented Jul 26, 2013

OK i figure out that it will not work if you use an ID instead of Class-name.
So $('#xyz'').noUiSlider() doesn't work, but $('.xyz').noUiSlider() will do the job!

@jrowny

This comment has been minimized.

Copy link

commented Jul 26, 2013

So I had to do a few things. I found there doesn't seem to be a default for "start" and "start" must be an array, even if you only have one handle. So I had to set the start option to [0, 0]. Second, the styles are all written on the noUiSlider class, so your div must have .noUiSlider class.

@ghost

This comment has been minimized.

Copy link

commented Jul 31, 2013

I have the same problem. Is their a specific Jquery version necessary? I made an exact copy of an example on the site. They only thing I got in debugging is: "noUiSlider is not a function".

@mattpi

This comment has been minimized.

Copy link

commented Aug 1, 2013

The development branch works, however, the performance on mobile - at least android 4x on my s3 - isn't quite there yet.
Hoping this plugin gets further dev, as it would be awesome to not have the bloat of jquery UI, but right now, it's not quite ready for production code.

@trejder

This comment has been minimized.

Copy link
Author

commented Aug 1, 2013

@mattpi I haven't got chance testing noUiSlider on mobile (I'm willing to do so soon, if above mentioned tips on getting it to work will be fine). But I tested a different lib (Bootstrap Slider) and there is a note somewhere around it, that adding "Modernizr" library makes it open to mobile (reaction on touch events) and brings a lot of improvement to performance on mobiles.

So... Maybe consider checking, if adding Modernizr to noUiSlider wouldn't have similar effect on mobiles?

@trejder

This comment has been minimized.

Copy link
Author

commented Aug 1, 2013

@nysthee Main pages says: "noUiSlider 3 requires jQuery version 1.7.x or newer". I've tested it on newest (at that time, maybe something has changed) 1.9.1 and... well... you can see the effects above (if there are any effects at all).

@mattpi

This comment has been minimized.

Copy link

commented Aug 1, 2013

@trejder - I've got modernizer running, no fun. Eventually settled for the excellent jQRangeSlider - although it requires Jquery UI, the total size of the script, plus required ui components, plus the css is about 60kb.
Yep, 10x the filesize of noUiSlider, but it works on mobile.

@trejder

This comment has been minimized.

Copy link
Author

commented Aug 1, 2013

@mattpi Interesting, how jQRangeSlider is working on mobiles, if default (core) jQuery UI slider doesn't work at all on mobiles (i.e. it reacts on taps, mimics by clicks, but to fails to react on sliding the knob -- no support for slide events).

Eventually, I'm going to test it if you suggests, it is fine. But I would like to avoid large jQuery UI just to have the slider -- I'm using Twitter Bootstrap, and the slider is the only thing that lacks there.

@abennouna

This comment has been minimized.

Copy link

commented Aug 1, 2013

Have you tried <div id="positionSlider" class="noUiSlider"></div> or <div id="positionSlider" class="noUiSlider vertical"></div> I remember I had to use class="noUiSlider horizontal" to make it "appear"

@jrowny

This comment has been minimized.

Copy link

commented Aug 1, 2013

@abennouna

This comment has been minimized.

Copy link

commented Aug 1, 2013

@jrowny Am I wrong or Ubilabs’ slider cannot have two handles?

@jrowny

This comment has been minimized.

Copy link

commented Aug 1, 2013

No, it's very basic, only a few options.

On Thu, Aug 1, 2013 at 1:57 PM, tellibus notifications@github.com wrote:

@jrowny https://github.com/jrowny Am I wrong or Ubilabs’ slider cannot
have two handles?


Reply to this email directly or view it on GitHubhttps://github.com//issues/93#issuecomment-21956831
.

Jonathan

@leongersen

This comment has been minimized.

Copy link
Owner

commented Aug 1, 2013

I'd like to put some proper time in soon; I lack the device range to test properly though. Every day I want to do some serious testing, I need to borrow from friends and family, which isn't exactly speeding up the process. Touch events are hellish, btw.

@trejder

This comment has been minimized.

Copy link
Author

commented Aug 2, 2013

@leongersen The thing is, that I started this issue because I failed to get your slider to work completely, even on desktop PC with Windows 7. Just as in initial report. If I would have problems only with mobile platforms, but this would work perfectly on desktop ones, I wouldn't start this issue, assuming that problem lies somewhere else.

I'm going to test, if I get some better results (on both desktop and mobile) affer applying tips given here.

@trejder

This comment has been minimized.

Copy link
Author

commented Aug 2, 2013

@zambadu: No, it not just use any class instead of id, @jrowny is right, it has to be noUiSlider class and nothing else, to make this work.

@jrowny: No, when I used class mentioned by you (noUiSlider) it immediately started to work and I didn't had to set start as an array even for one knob. It was just like in the docs, integer for one knob and array for two knobs / range select. And I'm certainly going to give "mobile-range-slider" a try. Thanks for coming out with it.

@nysthee: No, if you use the right class (noUiSlider), it should work with any modern jQuery. I tested this with 1.9.1.

@mattpi: I did a quick look at jQRangeSlider, it looks to heavy for me and need of jQuery UI, even custom/reduced and minfied is not an option for me.

@tellibus: No, using noUiSlider class is all you need to make this work, no additional classes are required. And if you're right, that "mobile-range-slider" doesn't support range selection, then it is really funny, that its author has called it "Mobile Range Slider", it certainly should be just "Mobile Slider", if it doesn't support ranges.

@jrowny

This comment has been minimized.

Copy link

commented Aug 2, 2013

So start can't be 0 because some of the logic checks incorrectly for start but 0 returns false and then it assigns an array instead of a singular value. The reason you have to use the noUiSlider class is because that's where all the styles come from.

@trejder

This comment has been minimized.

Copy link
Author

commented Aug 2, 2013

@jrowny Yes, start can be 0. Here is the code, I used and it works just fine, though start is 0 and given as integer, not as an array:

<div class="noUiSlider"></div>

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

Plus (to @ALL), if correct method of initiationg noUiSlider is by calling $(".noUiSlider").noUiSlider(); in Javascript, then need of adding noUiSlider manually by user is a misunderstanding. Above mentioned function should add it by itself. Look like bigger libs are designed, for example Twitter Bootstrap. You init an element or gadget by either adding it some class (simple page elements like panels, tabs, rollers) or by calling up its init function in Javascript (more complex UI elements), never both at the same time.

@leongersen

This comment has been minimized.

Copy link
Owner

commented Aug 3, 2013

You are right. This is a design mistake. Easily fixable, but confusing. The plugin and every bit of javascript works fine without the class, but in order to use it you'll need css. In the dev branch you'll see this issue resolved, but that branche has some other issues that prevent me from pulling it into the master.

@leongersen

This comment has been minimized.

Copy link
Owner

commented Sep 22, 2013

This issue is now gone. Version 4.0 has some new class-handling, so adding the .noUiSlider class is no longer required. Thanks for the discussion, everyone!

@leongersen leongersen closed this Sep 22, 2013

@trejder

This comment has been minimized.

Copy link
Author

commented Sep 23, 2013

Thanks for working out this issue and congrats on releasing 4.0! :]

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.