Angular uislider Disable

Question

I am using Angular UI Slider. Slider is working as expected. But I dont know how to disable it. I tried ng-disabled and few other things, it dint worked out.

Any idea on how I should disable this?

Answer 1

I found a way to disable the slider statically. You have to edit the angular-slider.js, so that the first command of the function onMove (should start in line 259) states

if ('disabled' in attributes) {return}

Then your html should look like

<slider disabled floor=0 ceiling=100 step=1></slider>

Unfortunately you can't change the disabled status during runtime this way, like you could when using ng-disabled="someCondition". One way to manage this around the corner, which I eventually did is something like:

<div ng-if="sliderHasToBeDisabled">
    <slider disabled ...>
</div>
<div ng-if="!sliderHasToBeDisabled">
    <slider ...>
</div>

If there is a more elegant and clean way, I'm still interested.

Answer 2

Update:

I just saw that you are not using the same Angular UI Slider app as me. Since your library is not longer maintained, I can recommend the jQuery UI Slider for AngularJS. With that lib, you can do what I wrote originally:

---

With

<div ui-slider="sliderOptions" ng-model="value"></div>

you can set the sliderOptions with

$scope.sliderOptions = {
    disabled: true
};

and also change $scope.sliderOptions.disabled while running the app.