constructor(public ctx, public cmp, public $el) {
	 	var data_ref = ctx.vars.$model.databind;
		this.editableNumber = ctx.vars.editableNumber;
		this.scaleElement = $el.find('.slider_scale')[0];
		this.thumbElement = $el.find('.slider_thumb')[0];
		this.inputElement = $el.find('.slider_input')[0];
		this.textElement = $el.find('.slider_text')[0];

		this.thumbElement.tabIndex = 1;
		$(this.thumbElement).bind('mousedown', e => this.dragBegin(e) );
		$(this.thumbElement).bind('keydown', e => this.keyDown(e) ); 
		$(this.inputElement).bind('keydown', e => this.inputKeyDown(e)); 
		$(this.inputElement).bind('blur', e => this.setInputValue());
		$(this.inputElement).hide();
		$(this.textElement).bind('mousedown', e => this.mouseDown(e) );

		this.numericValue = this.editableNumber.numericPart(jb.val(data_ref));
		this.$el.addClass('noselect');

		this.valueChangeEm = new jb_rx.Subject();
		this.valueChangeEm.distinctUntilChanged()
			.debounceTime(100)
			.filter(x => 
				x != jb.val(data_ref))
			.subscribe(x=>{
				jb.writeValue(data_ref,x); 
				jb_ui.apply(this.ctx); // to fix with ChangeDetectionStrategy
			})
	}

	setValue(val) {
		var fix1 = this.applyRangeAndResolution(val);
		this.numericValue = isNaN(fix1) ? '' : '' + fix1;
		var value_to_save = this.editableNumber.calcDataString(fix1,this.ctx);
		this.valueChangeEm.next(value_to_save);
		return this;
	}

 init: cmp =>  
   modifyOperationsEm
     .takeUntil( cmp.jbEmitter.filter(x=>x =='destroy') )
     .filter(e=>
       e.path == path)
     .subscribe(e=>
         jb.writeValue(data_ref,true)
     ),

export function notifyModification(path,before,ctx,ngPath) {
	var comp = path.split('~')[0];
	modifyOperationsEm.next({ comp: comp, before: before, after: compAsStr(comp), path: path, ctx: ctx, jbart: findjBartToLook(path), ngPath: ngPath });
}