Where this slider is planned to be used: In our promotions UI application for business to do certain easy filtering.

Goal: Slider should be able to filter out the result set to the selected attribute.

Assumptions: You can assume that you will call a backend RESTFUL api to get the result set which will contain Expired, Active, Future & All.

Task: The slider should just display the items that are selected on the slider.

Design: You should be able to handle load or volume of the data in the UI, there may be 1000s of items that can be returned from the backend and the control should be able to handle that.

Tools: Feel free to use any form of data for this implementation purpose. It can be from a file or a mock service.

Code : Commit the code in git for us to review and share the link.

If you have any questions feel free to reach out to me: Prakash / 425-281-4363

Create a slider for the items: Expired, Active, Future + All (All item could be like a checkbox or the first/last item on the slider decide whats the best option).

A simple blueprint (you can/should make it look much better):

Expired Active Future All (or just checkbox, or any other visual element)

Technology stack:

1. Angular 4;

2. Modular system; just one separate component (eventSlider for example);

3. Simple CSS3 styles, html 5 markups, no ui frameworks;

4. Support for IE10+, the latest FF, Chrome, Safari;

5. One component like a black box (@Input to set a state, @Output to notify other components outside that state has been changed);

6. A current state can be saved in the component (no need to overcomplicate a task and use ngRx).