scroll + type="range"
 

Добрый вечер дорогие форумчане пытаюсь прикрутить зум в canvas к ползунку type="range", в valBox отслеживаю значение прокрутки колесика верх в низ все работает только не могу поставить ограничения min-11 max7, вторая задача как прикрутить ползунок к событию зума в canvas прошу вашей помощи или совета :( зум в canvas работает отслеживаю его тоже в valBox

<span id="valBox">0</span><br><input type="range" min="-11" max="7" step="1" id="size" value="0">

function mousewheel( event ) {

		if ( _this.enabled === false ) return;

		event.preventDefault();
		event.stopPropagation();

		var delta = 0;
		

		
		if ( event.wheelDelta ) { // WebKit / Opera / Explorer 9

			delta = event.wheelDelta / 120;

		} else if ( event.detail ) { // Firefox

			delta = - event.detail / 3;

		}
		
		var rangedis = _zoomStart.x += delta / 1;
		$("#size").val(rangedis);
		$("#size").change(rangedis);
		$("#valBox").html(rangedis);
		$("#size").mousemove( function(e){$("#valBox").html($(this).val());});

	
		
		_zoomStart.y += delta * 0.01;
		_this.dispatchEvent( startEvent );
		_this.dispatchEvent( endEvent );

	}

мучаю эти строки может я иду не в том направлении?

var rangedis = _zoomStart.x += delta / 1;
		$("#size").val(rangedis);
		$("#size").change(rangedis);
		$("#valBox").html(rangedis);
		$("#size").mousemove( function(e){$("#valBox").html($(this).val());});