set value and refresh the slider to move to that value

[RakhiS]

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

[Sivakumar ShunmugaSundaram]

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.

[RakhiS]

Thanks, worked for me

[Indhumathy Loganathan]

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