FilterComponent.js

import {Component, Alias, Inject, Init} from "../utils/Decorators"

@Alias('filterComp')
@Component({
    selector: "filterComponent",
    templateUrl: '/views/components/filter-component.html',
    bind: {
        config: '=',
        changed: '=',
        user: '='
    }
})
export class FilterComponent {

    @Inject changed;

    @Inject user;

    /**
     * @type {LocationService}
     * */
    @Inject LocationService;

    /**
     * Get all locations
     */
    @Init
    async getLocations() {

        console.log(this.$rootScope.user);

        this.locations = await this.LocationService.index();

    }

    visibility = false;

    today = {
        start: moment().startOf('day').add(11, 'hours').valueOf(),
        end: moment().startOf('day').add(14, 'hours').valueOf(),

        from: moment().startOf('day').valueOf(),
        to: moment().endOf('day').valueOf()
    };

    filter = {
        date: moment().format('L'),
        start: this.today.start,
        end: this.today.end,
        location: 'Wor-Ati6'
    };

    showDatePicker() {
        this.visibility = true;
    };

    slider = {
        minValue: this.today.start, // 11:00 AM
        maxValue: this.today.end, // 14:00 PM
        options: {
            floor: this.today.start,
            ceil: this.today.end,
            step: 300000, // 5 Minutes
            noSwitching: true,
            draggableRange: true,
            translate: function (value, sliderId, label) {
                switch (label) {
                    case 'model':
                        return '<b>Von:</b>' + moment(value).format("HH:mm");
                    case 'high':
                        return '<b>Bis:</b>' + moment(value).format("HH:mm");
                    default:
                        return '<i class="fa fa-clock-o"></i> ' + moment(value).format("HH:mm")
                }
            },
            onChange: ::this.timeChanged
        }
    };

    timeChanged(foo, start, end) {
        this.filter.start = start;
        this.filter.end = end;

        this.changed(this.filter);
    }

    changed(filter) {
        console.log(filter);
    }

}