installment-slider.ts

import {customAttribute, autoinject} from 'aurelia-framework';
import { PaymentPlan } from './payment-plan';
import $ from 'jquery';
import 'bootstrap-slider';

@customAttribute('installment-slider')
@autoinject
export class InstallmentSlider {

    mySlider: any;

    constructor(private element: Element,
                private paymentPlan: PaymentPlan) {
                    
    }

    bind() {
       this.mySlider = jQuery(this.element).slider({
           tooltip: 'hide',
           max: 12,
           value: 0
       }).on('change', e => {
           this.paymentPlan.installmentAmount(e.value.newValue);
       });
    }

    unbind() {
        jQuery(this.element).slider('destroy');
    }

    resetSlider() {
        this.mySlider.slider('setValue', 0);
    }

}

quickpay.ts

import {autoinject} from 'aurelia-framework';
import * as firebase from 'firebase';
import { QuickPayService } from './quickpay-service';
import { InstallmentSlider } from './installment-slider';


@autoinject
export class QuickPay {

    constructor(private quickPayService: QuickPayService,
                private installmentSlider: InstallmentSlider) {

    }

    updateBound(selected) {
        let __this = this;
        let fieldReference: string = jQuery(selected).closest('.popover').attr('id');
        
        jQuery(selected).find('[data-for]').each((index, item) => {
            let bound = jQuery(item).attr('data-for');
            let value = jQuery(item).text();
            __this.quickPayService[bound] = value;
        });
        
        // Start: Focus on the next field that doesn't contain a value        
        function nextField(currentField) {
            return currentField.closest('.form-group').next().find('input');
        }

        let currentField = jQuery('input[aria-describedby="'+fieldReference+'"]').closest('.form-group').next().find('input');

        let limit = 1;
        while (currentField.val() !== '') {
            currentField = nextField(currentField);
            if (limit > jQuery('input').length) {
                break;
            }
            limit++;
        }

        currentField.focus();
        // End: Focus finder

        if (typeof this.quickPayService.providerName !== 'undefined' &&
            this.quickPayService.providerName !== '' &&
            typeof this.quickPayService.patientID !== 'undefined' &&
            this.quickPayService.patientID !== '') {
                this.quickPayService.gettingExistingBalance(this.quickPayService.patientID, this.quickPayService.providerName);
        }
        
    }

    processTransaction(type){
        console.log('process '+ type);
    }

    resetQuickPay() {
        this.quickPayService.providerID = null;
        this.quickPayService.providerName = null;
        this.quickPayService.providerID = null;
        this.quickPayService.patientName = null;
        this.quickPayService.patientID = null;
        this.quickPayService.existingBalance = null;
        this.quickPayService.todaysAmount = null;
        this.quickPayService.todaysPayment = null;
        this.quickPayService.remainingBalance = null;
        this.quickPayService.installments = 0;

        this.installmentSlider.resetSlider();
    }
}