Angular4 : Slider change should trigger separate functions for separate range values

Question

I am using a slider in Angular 4. Below is my code in HTML:

  <div oninput="range1value.value = range1.valueAsNumber" id="range">
                    Actual/Optimised
                    <input name="range1" type="range" step="1" min="1" max="3" value="1" (onRangeChanged)="onRangeChange"> Adjusted
                    </div>

I want the slider to trigger a function Max() when it is on the maximum range and I want it to trigger separate function Min() when it is on the minimum range. Please help.

Regards

Neha

You don't need to make two functions because you can handle this inside the function by checking the value of the input. — Surjeet Bhadauriya
– Surjeet Bhadauriya, Commented Jan 3, 2018 at 10:35
@SurjeetBhadauriya I am new to angular. How can i achieve it? — Neha Uniyal
– Neha Uniyal, Commented Jan 3, 2018 at 10:51

Surjeet Bhadauriya · Accepted Answer · 2018-01-03 11:33:52Z

1

You can achieve this thing by making a function in the component.

Component

In the below function, you can do whatever you want.

  onChangeRange(rangeValue: any){
    console.log(rangeValue);
    if(rangeValue == 1){
       //do something
     }else if(rangeValue == 3){
       //do something else
     }else{
       //do something else
     }
  }

HTML

<input name="range1" type="range" step="1" min="1" max="3" [(ngModel)]="rangeValue" (change)="onChangeRange(rangeValue)"> Adjusted

Explanation

rangeValue: this contains the value of the range.

onChangeRange: this is a function which will call when you change the range.

answered Jan 3, 2018 at 11:33

Surjeet Bhadauriya

7,2223 gold badges39 silver badges54 bronze badges

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

Collectives™ on Stack Overflow

Angular4 : Slider change should trigger separate functions for separate range values

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related