We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

set value and refresh the slider to move to that value

Hi, 

 I am using ejs-slider

 <ejs-slider #slider1 id='slider1' [min]=0 [max]=2 [value]=(statusvalue) [step]=1 [tooltip]="tooltipData02" [ticks]="ticksData02"

                    (changed)="onChange($event)" (tooltipChange)='tooltipChangeHandler($event)'

                    (renderingTicks)='renderingTicksHandler($event)' [enableAnimation]='isAnimation' ></ejs-slider>


in this, I want to set the value to 0 for some condition, I am seeting its value parameter to 0 in ts, but the changes are not reflecting in this slider without page refresh, I tried with enable animation also but nothing is working! please can you help me out


3 Replies

SS Sivakumar ShunmugaSundaram Syncfusion Team March 1, 2023 01:16 PM UTC

Hi RakhiS,


Greetings from Syncfusion support.


With the shared details, we understand that you want to dynamically set our Slider component value to zero from your side. To achieve your requirement, you just need to set the Slider value property to the required value and refresh the Slider component using the refresh method. The shared sample demonstrates how to reset the Slider value to zero using a button click. Similarly, you can be able to reset the Slider value.


Refer to the below code snippet.

[app.component.html]

 

<div class="col-lg-8 control-section">

  <div class="content-wrapper">

    <div class="sliderwrap">

      <!-- Slider element -->

      <ejs-slider

        #eventSlider

        id="minrange"

        [value]="value"

        [min]="min"

        [max]="max"

        [type]="type"

        [ticks]="ticks"

        [tooltip]="tooltip"

      ></ejs-slider>

    </div>

  </div>

  <button id="normalbtn" (click)="onClick($event)">Reset Slider value</button>

</div>

 


[app.component.ts],

 

export class AppComponent {

    @ViewChild('eventSlider')

    public eventSlider: SliderComponent;

...

    onClick() {

      this.eventSlider.value = 0;

      this.eventSlider.refresh();

    }

  }

 

 


Sample: https://stackblitz.com/edit/angular-eqchfl?file=src%2Fapp.component.ts


Check out the shared sample for your reference.



RA RakhiS March 7, 2023 07:11 AM UTC

Thanks, worked for me



IL Indhumathy Loganathan Syncfusion Team March 9, 2023 06:44 AM UTC

RakhiS, We are glad to hear that your reported query has been resolved. Please get back to us if you need any further assistance.


Loader.
Up arrow icon