Show Angular Range Slider component from hidden state

10 Jan 20254 minutes to read

This section demonstrates how-to render the Slider component in hidden state and make it visible in button click. We can initialize Slider in hidden state by setting the display as none.

In the sample, by clicking on the button, we can make the Slider visible from hidden state, and we must also call the refresh method of the Slider to render it properly based on its original dimensions.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { Component, ViewChild, ElementRef } from '@angular/core';
import { SliderComponent, SliderModule, SliderTickEventArgs, SliderTooltipEventArgs } from '@syncfusion/ej2-angular-inputs';
import { ButtonComponent } from '@syncfusion/ej2-angular-buttons';

/**
 * Default sample
 */

@Component({
    imports: [
        SliderModule
    ],
    standalone: true,
    selector: 'my-app',
    template: `
    <button ejs-button #button (click)="Click()" id="element">Button</button>
    <div id='container'>
    <div #wrapDiv id="wrap">
            <ejs-slider #slider id='slider' [min]="min" [max]="max" [value]="value" [tooltip]="tooltipData" [ticks]="ticksData" [showButtons]=true [step]="step"
                (tooltipChange)='tooltipChangeHandler($event)' (renderingTicks)='renderingTicksHandler($event)'></ejs-slider>
        </div>
    </div>`,
})

export class AppComponent {
    @ViewChild('button')
    public clear: ButtonComponent | any;
    @ViewChild('slider')
    public slider: SliderComponent | any;
    @ViewChild('wrapDiv')
    public wrapDiv!: ElementRef;

    public tooltipData: Object = { placement: 'Before', isVisible: true };
    public ticksData: Object = { placement: 'After', largeStep: 2 * 3600000 };
    public min: number = new Date(2013, 6, 13, 11).getTime();
    public max: number = new Date(2013, 6, 13, 17).getTime();
    public step: number = 3600000;
    public value: number = new Date(2013, 6, 13, 13).getTime();

    tooltipChangeHandler(args: SliderTooltipEventArgs): void {
        let totalMilliSeconds = Number(args.text);
        let custom: any = { hour: '2-digit', minute: '2-digit' };
        args.text = new Date(totalMilliSeconds).toLocaleTimeString("en-us", custom);
    }

    renderingTicksHandler(args: SliderTickEventArgs): void {
        let totalMilliSeconds = Number(args.value);
        let custom: any = { hour: '2-digit', minute: '2-digit' };
        args.text = new Date(totalMilliSeconds).toLocaleTimeString("en-us", custom);
    }
    Click() {
        this.wrapDiv.nativeElement.style.display = 'block';
        this.slider.refresh();
    }
}

styles.css

@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-popups/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';

#wrap {
    box-sizing: border-box;
    height: 100px;
    margin: 0 auto;
    padding: 30px 10px;
    width: 460px;
    display: none;
}

#wrap .label {
    text-align: center;
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));