ws-form-builder/src-inlined/components/ws-single-range-slider/ws-single-range-slider.ts

Ionic 2 Form Builder

import { Component, Input, Output, EventEmitter } from '@angular/core';
import { FormBuilderProvider } from '../../providers/form-builder/form-builder';
 

@Component({
  selector: 'ws-single-range-slider',
  template: `
    <div class="ranger-slider-container {{fieldClass}}">
     <ion-item detail-push class="range-slider-label" *ngIf="!question.hideQuestion">
        {{question.question}}
      </ion-item>
    <ion-item>
        <ion-label class="range-slider">
        	<ion-icon name="{{iconLeft}}" *ngIf='iconLeft !== ""' class="icon--left"></ion-icon>

        	<ion-badge *ngIf='showNumber'>{{fieldValue}}</ion-badge>

        	<ion-icon name="{{iconRight}}" *ngIf='iconRight !== ""' class="icon--right"></ion-icon>
        </ion-label>
        <ion-range min="{{minValue}}" max="{{maxValue}}" step="{{step}}" [(ngModel)]='fieldValue' debounce="700" (ionChange)="setAnswer($event)"   snaps="{{snaps}}"></ion-range>
    </ion-item>

    </div>
  `,
  styles: [`
    .ranger-slider-container .range-slider{width:100%;margin:8px 8px 0 0;min-height:40px;text-align:center}.ranger-slider-container .range-slider .badge{margin:15px auto 0}.ranger-slider-container .range-slider .icon{font-size:40px;position:relative;top:3px}.ranger-slider-container .icon--right{float:right}.ranger-slider-container .icon--left{float:left}
  `]
})
export class WsSingleRangeSliderComponent {

   	@Input('question') question;
  	@Output() answerGiven = new EventEmitter();
  	step:number = 1;
  	minValue:number = 0;
  	maxValue:number = 100;
  	snaps:boolean = false;
  	fieldValue:number = 20;
  	isFieldValid:boolean = false;
	showError:boolean = false;
	iconLeft:string = '';
	iconRight:string = '';
	showNumber:boolean = true;
	fieldClass:string = '';

  	constructor(public formBuilder: FormBuilderProvider){
    	
  	}

	ngOnInit() {

	    if(typeof this.question.step !== 'undefined'){
	        this.step = this.question.step;
	    } 

	    if(typeof this.question.maxNumber !== 'undefined'){
	        this.maxValue = this.question.maxNumber;
	    } 

	    if(typeof this.question.minNumber !== 'undefined'){
	        this.minValue = this.question.minNumber;
	    } 
	    if(typeof this.question.snaps !== 'undefined'){
	        this.snaps = this.question.snaps;
	    }
	    if(typeof this.question.iconLeft !== 'undefined' && this.question.iconLeft !== ''){
	        this.iconLeft = this.question.iconLeft;
	    }
	    if(typeof this.question.iconRight !== 'undefined' && this.question.iconRight !== ''){
	        this.iconRight = this.question.iconRight;
	    }

	    if(typeof this.question.showNumber !== 'undefined'){
	        this.showNumber = this.question.showNumber;
	    }
	    if(typeof this.question.defaultNumber !== 'undefined' && this.question.defaultNumber !== ''){
	        this.fieldValue = this.question.defaultNumber;
	    }

	    if(typeof this.question.value !== 'undefined' && this.question.value !== ''){
	        this.fieldValue = this.question.value;
	    }

	    if(typeof this.question.inputClass !== 'undefined'){
          this.fieldClass = this.question.inputClass;
      	}
	    
	}

	
	setAnswer(event){
	  

	  	if(this.fieldValue){
	  		this.question.value = this.fieldValue;
	      this.question.valid = true;
	  		this.answerGiven.emit(this.question);
	  	}
	  		
	}


	validateAnswer(question,string){	
	  	return this.formBuilder.validateAnswer(question,string);
	}


}