How to dynamically enable or disable ion-range-slider using Ionic 3 and Angular 5?

Question

I have implemented a slider using ion-range-slider. It is having a disable option to make the slider enable or disable. But I need to make it enable/disable dynamically.

I tried this way. I am not able to achieve this. Please help me what I need to do? Her's the code.

<ion-range-slider #advancedSliderElement
                  type="single"
                  [min]="0"
                  max="100"
                  from={{r.rule}}    
                  from_shadow="true"
                  to="40"
                  to_shadow="true"
                  grid="true"
                  grid_num="10"
                  prefix=""
                  postfix=""
                  decorate_both="false"
                  disable = "rangeDisable"
                  (onChange)="update(advancedSlider, $event)"
                  (onFinish)="finish(advancedSlider, $event, i)">
            </ion-range-slider>

My manage.ts code is:

export class ManagePage {
public rangeDisable: boolean = true;
constructor(public navCtrl: NavController) {}
enableSave() {
        this.rangeDisable = false;
    }
}

I need to make slider enable on click of a button

<button class="button-border" ion-button round (click)="enableSave()" ><i class="material-icons">create</i> </button>

Please guide me how to proceed.

Suraj Rao · Accepted Answer · 2018-05-24 11:25:55Z

1

You just need to use [] to bind your boolean variable to the property of the component.

<ion-range-slider #advancedSliderElement
                  type="single"
                  min="0"//no need to bind if you are sending a value
                  max="100"
                  [from]="r.rule"  
                  from_shadow="true"
                  to="40"
                  to_shadow="true"
                  grid="true"
                  grid_num="10"
                  prefix=""
                  postfix=""
                  decorate_both="false"
                  [disable] = "rangeDisable"//here
                  (onChange)="update(advancedSlider, $event)"
                  (onFinish)="finish(advancedSlider, $event, i)">
            </ion-range-slider>

answered May 24, 2018 at 11:25

Suraj Rao

29.7k11 gold badges96 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Darshan theerth Over a year ago

thank you so much, I didn't know we can bind other properties with just giving brackets.

Ivafo Over a year ago

@Darshantheerth you might want to check out the Angular tutorial, this will prevent a lot of headache in the future ;) angular.io/tutorial

Suraj Rao Over a year ago

angular.io/guide/template-syntax its angulars data binding.. your library is also built on angular and uses input() to bind data. I suggest you go through the docs

Collectives™ on Stack Overflow

How to dynamically enable or disable ion-range-slider using Ionic 3 and Angular 5?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related