Bringing it to life

So far, we've covered the rendering of the slider background, as well as the rendering of the activity indicators. We've also generated ticks and displayed them with a grid line and a label, to display the calendar time of each tick.

Well, that does not really make a slider, does it? Of course, we also need to handle user input, and make the slider interactive, so that users can select a time range that they want to display the activities for.

To do this, add the following changes to the component class:

import {  ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostListener,  Input, OnChanges, Output, SimpleChanges, ViewEncapsulation} from '@angular/core';import {Activity, ActivitySliderSelection} from '../../model'; ...

Get Mastering Angular Components now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.