Getting Started with Kendo UI for Angular Slider

@Component({
    selector: 'my-app',
    template: `
            <div style="height: 300px; text-align: center;">
                <p>EQUALIZER</p>
                <div class="eqSlider">
                    <kendo-slider
                        [vertical]="true"
                        [showButtons]="false"
                        [min]="min"
                        [max]="max"
                        [smallStep]="smallStep"
                        [largeStep]="largeStep"
                        [(ngModel)] = "valuesVertical[0]"
                    ></kendo-slider>
                    <p>{{ valuesVertical[0] }}</p>
                </div>
                <div class="eqSlider">
                    <kendo-slider
                        [vertical]="true"
                        [showButtons]="false"
                        [min]="min"
                        [max]="max"
                        [smallStep]="smallStep"
                        [largeStep]="largeStep"
                        [(ngModel)] = "valuesVertical[1]"
                    ></kendo-slider>
                    <p>{{ valuesVertical[1] }}</p>
                </div>
                <div class="eqSlider">
                    <kendo-slider
                        [vertical]="true"
                        [showButtons]="false"
                        [min]="min"
                        [max]="max"
                        [smallStep]="smallStep"
                        [largeStep]="largeStep"
                        [(ngModel)] = "valuesVertical[2]"
                    ></kendo-slider>
                    <p>{{ valuesVertical[2] }}</p>
                </div>
                <div class="eqSlider">
                    <kendo-slider
                        [vertical]="true"
                        [showButtons]="false"
                        [min]="min"
                        [max]="max"
                        [smallStep]="smallStep"
                        [largeStep]="largeStep"
                        [(ngModel)] = "valuesVertical[3]"
                    ></kendo-slider>
                    <p>{{ valuesVertical[3] }}</p>
                </div>
                <div class="eqSlider">
                    <kendo-slider
                        [vertical]="true"
                        [showButtons]="false"
                        [min]="min"
                        [max]="max"
                        [smallStep]="smallStep"
                        [largeStep]="largeStep"
                        [(ngModel)] = "valuesVertical[4]"
                    ></kendo-slider>
                    <p>{{ valuesVertical[4] }}</p>
                </div>

            </div>
            <div style="text-align: center;">
                <p>BALANCE</p>
                <div>
                    <kendo-slider
                        [fixedTickWidth]="10"
                        [min]="-10"
                        [max]="10"
                        [smallStep]="smallStep"
                        [(ngModel)] = "valueHorizontal"
                    >
                        <kendo-slider-messages
                            increment="Right"
                            decrement="Left"
                        ></kendo-slider-messages>
                    </kendo-slider>
                </div>
                <div>{{ valueHorizontal }}</div>
            </div>
    `,
    styles: [`
        .eqSlider {
            display: inline-block;
            margin: 2em;
            height: 122px;
            vertical-align: top;
        }

        .eqSlider p {
            padding-top: 10px;
        }
    `]
})
class AppComponent {
    public valueHorizontal: number = 0;
    public valuesVertical: number[] = [10, 5, 0, 10, 15];
    public min: number = -20;
    public max: number = 20;
    public largeStep: number = 20;
    public smallStep: number = 1;
}