vasyabigi / angular-nouislider Goto Github PK

Once the change event happens, I need a way to call a custom function.

Therefore, I think it would be beneficial to add another item
to the isolated scope of the directive that gives a hook for the
change event of uinoslider.

http://refreshless.com/nouislider/events-callbacks#change

actionAfterChange: '&'

...

            slider.on('change', function () {
                if (scope.actionAfterChange !== undefined) {
                    scope.actionAfterChange(scope);
                }
            });

<div slider  ng-model="test.live" ... action-after-change="myCustomAction()"></div>

Then call myCustomAction in controller.

I have nouislider populating a chart, however the lack of debounce in the slider renders the chart oddly when changing the data (sliding the slider).

Is there a debounce we can add where the slider does not send the slider information until a specific time is added? can I add an equation to the slide callback to do this?

I've tried setting connect="lower" but the classes don't get added.

Unless I am completely missing something, is it not a bit against best practice
to use ngFrom and ngTo as attribute names?

What if these become standards in some future version of angular for
unrelated to the intention of them in this directive?

https://docs.angularjs.org/guide/directive

Best Practice: In order to avoid collisions with some future standard, it's best to prefix your own directive names. For instance, if you created a directive, it would be problematic if HTML7 introduced the same element. A two or three letter prefix (e.g. btfCarousel) works well. Similarly, do not prefix your own directives with ng or they might conflict with directives included in a future version of Angular.

If I concat or uglify nouislider.js or nouislider.min.js with other libraries (as I attempt to do in my project) I run into issues as 'use strict' is enabled globally.

Wrapping in an IIFE will help.

see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode#Strict_mode_for_scripts

<div slider ng-from="test.from" ng-to="test.to" start=0 end=24 step=0.5></div>

Wish it should work similar to 'Examples with decimals' on this page:
http://angular-ui.github.io/ui-slider/demo/demo.html

Problem:

A digest errror (Error: $digest already in progress) is thrown on page load when the callback is set to the set event, this is because set fires when the data is initialized and the $apply is thus called.

Solution:

Place a check around the callback section. See this SO question

I'm trying to use this with requirejs and i'm getting: Uncaught ReferenceError: angular is not defined. I'm defining angular and haven't had an issue up to this point. Thoughts?

I believe the directive should be calling parseFloat() in more places...

slider.noUiSlider({
          start: [
            scope.ngFrom || scope.start,
            scope.ngTo || scope.end

...should change to this:

slider.noUiSlider({
          start: [
            parseFloat(scope.ngFrom) || parseFloat(scope.start),
            parseFloat(scope.ngTo) || parseFloat(scope.end)

Thanks a lot for this directive, it's quite neat and I have already used it with success on a couple of projects.

Unfortunately it seems that it is not compatible with noUiSlider latest release. After updating my assets to support it, I get the following errors in Chrome WebDeveloper Tools:

Uncaught TypeError: undefined is not a function jquery.nouislider.js?body=1:1251
Error: noUiSlider: 'start' option is incorrect.

The "undefined is not a function" error is pointing at a conflict with this line added in the last release:

// Attach a classbased val handler.
$.classVal(Classes[0], 'vGet', 'vSet', false);

The error happened using the classic demo slider:

<div slider ng-from="test.from" ng-to="test.to" start=0 end=100 step=5 callback='set'></div>

Hope you will manage to figure it out easily... Thanks again !

Dunno since which version it broke, but it's now not working any more. E.g.:

• step expects numeric value
• range expects object, not array
  ... and many more

Also you can't properly initialize range type slider when you don't preset your from/to values in controller. That's bad.

• bower install angular-nouislider --save
• jQuery.nouislider: 7.0.10
• jQuery: 2.1.3
• Angular 1.3.3

The bower installation couldn't find suitable version for angular, and maybe nouislider too (can't remember). So I left the versions I was already using (listed above)

Commenting/removing line 29 from nouislider.js seems to resolve the issue:

margin: parseFloat(scope.margin || 0),

It seems that this option is causing errors in recent versions of nouislider, because when I leave it in I get the following error:

Error: noUiSlider: 'margin' option is only supported on linear sliders.

Hi,
In the description you have a link.js included - Do I need this, I can't seem to find it anywhere.

Is it possible to add steps for a non-linear slider? As seen on this page (a bit down on the page): http://refreshless.com/nouislider/slider-values/

It looks like currently, we can only select which uislider event to cause an update to ngModel, ngFrom, and ngTo via the callback attribute and setting a $watch.

It would be fantastic if we can also run custom angular expressions any or all 3 of these events? A natural use case for this would be to update visual elements such as a tooltip on slide and do more expensive tasks such as saving to server on set or change

<div slider ng-model="test.single" start=1 end=10 
on-slide="updateScreen($slideVal)" on-set="saveModel()"></div>

Slider model changes are not setting the dirty flag.
Requiring ngModel and using ngModel.$setViewValue should fix it.

Hi,
This component is using version 6.x of nouislider. Any plans to add support for version 8.x of nouislider?

First, thanks for the work on this directive.
jQuery nouislider sure seems like a better tool than
the jQuery UI slider.

Sort of surprised, though, that the 'slider behaviour' option is not made available as an attribute?

http://refreshless.com/nouislider/behaviour-option

In the isolated scope of the directive, all it needs is behaviour: '@',
and in the link function, a thoughtful default if no behaviour attribute
is declared; e.g.,
if (scope.behaviour === undefined) { scope.behaviour = 'drag'; }.

I'm going to be adding it to my download of the angular-nouislider,
as it is a 'must-have' to be able to use a draggable range.

One of the reasons noUIslider is great is the lack of dependencies. I see this project requires jQuery, but from your code it looks like you barely use it. Sadly, this is a dealbreaker for me.
Please consider using vanillaJS for the few things you are doing with it?

I took a peek into your gruntfile. It looks very messy, kind a yeomen generated... Do you need help to clean it up?

Also noticed that no karma.conf.js and tests are present. Are they forget to commit or it is gruntfile configuration bug?

Please npm publish this package. It's not installable via npm. Thanks!

I am getting only a single handle as well as "Expression 'undefined' used with directive 'slider' is non-assignable!"

My directive html is below

    <div slider ng-from="filter.scope.from" ng-to="filter.scope.to" start="10" end="100" step="5" ></div>

Somebody, Show me pls working version this slider with custom range (non-linear) ...
Cuz i try all various of "range:{}" set, and all not work. Work only with "range:[]".
And i many time try to find already work version non-linear angular nouiSlider, but not have results...

Is there anyway to set the start and end other than hardcoding it into the attributes?

It seems the author removed all but the most recent version from bower (only 7.0.5 is available now). This is causing this repo to fail to install.

Hi,

I have a need to segment the actual slider bar at each step. Is this currently supported or could you advise on the best way to get this done? I have one handler, see below example of what I'd like to get done. As you can see I have 3 steps, where a white marker shows the point of each step.

I have problem using angular-nouislider. I have receive the following error message;

angular.js:13642 TypeError: slider.noUiSlider is not a function

My script tags

    <script src="res/jqueryslider.js"></script>
    <script src="res/link.js"></script>
    <script src="res/angular-nouislider/src/nouislider.js"></script>

You have mentioned in your readme.md file to include link.js file but there is no link.js file in nouislider.

I have link.js and jqueryslider.js file from here and here respectively.

Handlers don't position correctly when I use both slide range and input range. It can be easily reproduced on the demo site:

http://vasyabigi.github.io/angular-nouislider/

1. Set RangeTo to f.e. 85 by slider. It is important to use slider.
2. Set RangeTo to f.e. 40 by input field.
3. Try to set 85 by input field.
4. Try to set any other value than 85.

Handler doesn't move when it comes to setting previously used value. It seems that current position of handler is stored in cache only when I use slider directly. If position is changed by input field then current handler position cache is not refreshed.

I saw the following pge:
http://vasyabigi.github.io/angular-nouislider/
And I want to use nouislider but I can not.
What is bower?
How can I use bower and nouislider?