no such method 'setValue' for slider widget instance

[hmillet]

Hi,

I'm trying to use this durective in my application, but no way.
I always have an "no such method 'setValue' for slider widget instance" Error, and my DOM is not like the one in your test page :

<div slider-id="mySlider" ng-model="slider.sliderValue" value="10" min="5" max="100" step="5" range="false" precision="2" reversed="false" orientation="horizontal" handle="round" enabled="true" ng-disabled="false" naturalarrowkeys="false" class="ng-isolate-scope ng-valid">
  <input class="slider-input ui-slider ui-slider-horizontal ui-widget ui-widget-content ui-corner-all" type="text" aria-disabled="false"></input>
</div>

Has someone an idea on my trouble ?

[seiyria]

No idea; can you make a plunker that simulates your environment better?

[hmillet]

Difficult... it's a big app with so many libraries :-(

[seiyria]

Sorry, without knowing specifically what's going wrong, it's hard to debug an issue.

[hmillet]

I understand that ... I will still "fight" to understand my trouble... until I can make a plunker

[hmillet]

I got it.

This does not work when include jquery-ui. That's annoying. Here is my plunker.

http://plnkr.co/edit/hO421vl7G1nHAfCtvclK?p=preview

When you remove the jquery-ui script, all is fine... except that I don't understand why my initial value is not set

Thanks for Help

[hmillet]

There is an issue about this on the bootstrap-slider project : seiyria/bootstrap-slider#250

An answer was find here for the bootstrap-slider : http://stackoverflow.com/questions/26691018/using-bootstrap-slider-with-jquery-ui

It says : use bootstrapSlider() function in order ti initialize the bootstrap-slider, in replacement of slider()

Maybe this directive can consider this...

[seiyria]

If you'd like to submit a PR that adds a new attribute no-conflict then I'd take it!

[hmillet]

What about using the same test than the original bootstrap-slider component, instead of a new no-conflict attribute ?

if($) {
  var namespace = $.fn.slider ? 'bootstrapSlider' : 'slider';
  $.bridget(namespace, Slider);
}

[seiyria]

That'd be fine also.

[hmillet]

Well, I can't achieve in making this works.

Adding jQuery-UI, we must use mySlider.bootstrapSlider() instead of mySlider.slider() (information from seiyria/bootstrap-slider)

Replacing then the 6 occurences of slider with bootstrapSlider in the directive script make a new errors occurs, that I cannot understand :

TypeError: Cannot read property 'removeChild' of null
    at Slider.destroy (http://abs.dev.hmillet.com/bower_components/seiyria-bootstrap-slider/js/bootstrap-slider.js:780:31)
    at $.fn.(anonymous function) [as bootstrapSlider] (http://abs.dev.hmillet.com/bower_components/seiyria-bootstrap-slider/js/bootstrap-slider.js:134:50)
    at initSlider (http://abs.dev.hmillet.com/slider.js:113:32)
    at Object.fn (http://abs.dev.hmillet.com/slider.js:187:25)

In the destroy method in bootstrap-slider.js, this.sliderElem.parentNode is null :-(

            destroy: function(){
                // Remove event handlers on slider elements
                this._removeSliderEventHandlers();

                // Remove the slider from the DOM
                this.sliderElem.parentNode.removeChild(this.sliderElem);
                /* Show original <input> element */
                this.element.style.display = "";

                // Clear out custom event bindings
                this._cleanUpEventCallbacksMap();

                // Remove data values
                this.element.removeAttribute("data");

                // Remove JQuery handlers/data
                if($) {
                    this._unbindJQueryEventHandlers();
                    this.$element.removeData('slider');
                }
            },

if someone has any idea...

[seiyria]

Are you using the right version of the library with the directive?

[hmillet]

Think so.

Clone the project, run bower install...

[seiyria]

Just checking. I don't know, it should not matter which function you use. That said, I can't claim to understand how bridget works; it COULD be a byproduct of this library using the jQuery wrapper instead of using the vanilla JS style. Perhaps, the PR would remove the jQuery aspect and instead use that vanilla JS constructor?

[namwkim]

The same error occurs in the following (slider.js - line 178):

// deregister ngModel watcher to prevent memory leaks
if (angular.isFunction(ngModelDeregisterFn)) ngModelDeregisterFn();
ngModelDeregisterFn = $scope.$watch('ngModel', function (value) {
slider.slider('setValue', value);
}, true);

[hmillet]

@namwkim : Are you using jQuery-UI ?

[namwkim]

Yea I am using jQuery-UI. As far as I know it worked with jQuery-ui before.

I am wondering if this problem occurs with recent updates?.

Here is a working version if you want:
Site: https://study.namwkim.org/bubble/admin#
Source: view-source:https://study.namwkim.org/bubble/admin#

[seiyria]

It's possible that jquery UIs slider is interfering with it, as it has in the past.

[fergalmoran]

@namwkim The versions you've linked to fix the issue. Where are they from?
Thanks btw!!