1. Home
  2. Forum
  3. Angular - EJ 2
  4. to call function only at the point not in between of the slider

to call function only at the point not in between of the slider

Hi, I have used the default slider. Now when a user moves from Beta to Live or Beta to off I want to show a alert message, This time the laert message is coming multiple times as when we slide between the two points. I only want to show alert at the points not while sliding.Please help.

I have used the following event:
tooltipChangeHandler(args: SliderTooltipEventArgs): void {
    let daysArr: string[] = ['off', 'Beta', 'Live'];
    args.text = daysArr[parseFloat(args.text)];
      if (args.text == "off") {      
        this.data.UpdateWFStatus(this.configuringWFId, "Offline").subscribe(
          (data: string) => {
//this is showing multiple times.
            this.toasts[1].content = "Your Workflow is in Offline mode";
            this.toastObj.show(this.toasts[1]);

          })
    }



5 Replies 1 reply marked as answer
SP Sowmiya Padmanaban Syncfusion Team July 10, 2020 01:30 PM UTC

Hi RakhiS,  
 
Greetings from Syncfusion support. 
 
We have checked your requirement with Slider component. We suspect that your requirement is to show the alert message when it reached the Live. Change event is triggered when changing the slider value. Using that event, we have check the slider value and show the alert message. 
 
Refer the below code snippet. 
 
    change(args) { 
      //Check the value and show the alert. 
      if(args.value== 40) 
      { 
        alert("event triggered"); 
      } 
    } 
 
 
Refer the below sample link. 
 
 
If we misunderstood your requirement. Could you please share the exact requirement of your slider component. It will help us to resolve your issue at the earliest. 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya P.  


Marked as answer
RA RakhiS replied to Sowmiya Padmanaban July 13, 2020 11:09 AM UTC

Hi RakhiS,  
 
Greetings from Syncfusion support. 
 
We have checked your requirement with Slider component. We suspect that your requirement is to show the alert message when it reached the Live. Change event is triggered when changing the slider value. Using that event, we have check the slider value and show the alert message. 
 
Refer the below code snippet. 
 
    change(args) { 
      //Check the value and show the alert. 
      if(args.value== 40) 
      { 
        alert("event triggered"); 
      } 
    } 
 
 
Refer the below sample link. 
 
 
If we misunderstood your requirement. Could you please share the exact requirement of your slider component. It will help us to resolve your issue at the earliest. 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya P.  


Thanks for your response. But is it not satisfying my query. It is working same like tooltipChangeHandler. I want to show three different alerts on three diffrent value points and not in the middle . This time it is calling again and again when I started slidding from one to to another. PLEASE HAVE A LOOK into the previous query and kindly provide solution accordingly. 

Thanks

SP Sowmiya Padmanaban Syncfusion Team July 14, 2020 02:54 PM UTC

Hi RakhiS,   
 
Based on your shared details, we suspect that your requirement is to show the tooltip for particular values in Slider component. To achieve this, we have added a class in tooltip’s wrapper element and set the visibility as hidden for other values and show tooltip only on your desired values. 
 
Refer the below code snippet. 
 
  tooltipChangeHandler(args) { 
    var tootip = document.querySelector(".e-tooltip-wrap"); 
    if(tootip)  { 
    if(args.value == 0 || args.value == 40 ||args.value == 20 ){  
       if(tootip.classList.contains("hide")) 
       tootip.classList.remove("hide"); 
      } 
    else {      
       tootip.classList.add("hide"); 
    } 
    } 
  } 
.e-tooltip-wrap.e-slider-tooltip.hide { 
   visibility: hidden; 
   display: none; 
} 
  
.e-slider-container #slider .e-handle{ 
  transform: scale(1) !important; 
} 
 
Refer the below sample link: 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


RA RakhiS replied to Sowmiya Padmanaban July 20, 2020 05:01 AM UTC

Hi RakhiS,   
 
Based on your shared details, we suspect that your requirement is to show the tooltip for particular values in Slider component. To achieve this, we have added a class in tooltip’s wrapper element and set the visibility as hidden for other values and show tooltip only on your desired values. 
 
Refer the below code snippet. 
 
  tooltipChangeHandler(args) { 
    var tootip = document.querySelector(".e-tooltip-wrap"); 
    if(tootip)  { 
    if(args.value == 0 || args.value == 40 ||args.value == 20 ){  
       if(tootip.classList.contains("hide")) 
       tootip.classList.remove("hide"); 
      } 
    else {      
       tootip.classList.add("hide"); 
    } 
    } 
  } 
.e-tooltip-wrap.e-slider-tooltip.hide { 
   visibility: hidden; 
   display: none; 
} 
  
.e-slider-container #slider .e-handle{ 
  transform: scale(1) !important; 
} 
 
Refer the below sample link: 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


Hi,
Thanks for the reply.
But my query is different. 
See when I slide on this slider from value 0 to value 1 (toast message: you are at value 1), 
or from value 1 to value 2,(toast message: you are at value 2) or 
from value 2 to value 0 (you are at value 0) or
 from value 0 to value 2 (you are at value 2) 

I want to show toast with this messages. but what is happening the toast messages are coming repeatedly from the time I start to slide from 0 until reached to the destination value. I want to show it only when it reaches to the destination. 

I hope my query is clear to you now.
Please reply accordingly!
Thanks in advance

SP Sowmiya Padmanaban Syncfusion Team July 22, 2020 11:06 AM UTC

Hi RakhiS,  
 
We have validated your reported issue with Slider component. This issue occurs due to Tooltipchange event is triggered for more than one times when changing the slider value. We have consider this as a bug from our end. The fix for this issue will be included in our Volume 3 Release which is expected to be released at the end of September 2020. 
 
Track the below link to know the bug status. 
 
 
We appreciate your patience. 
 
Regards,  
Sowmiya.P 


Loader.
Up arrow icon