Resize Angular Material Bottom Sheet, when dragged from the bottom

I am using Angular Material Bottom Sheet, but I want it in such a way, that it should get adjusted, when the user drags it up and down from the bottom.

I have used one plugin to resize the bottom sheet, but the bottom sheet is getting dragged up and down without resizing, it's bottom is not fixed.

Here's the working code in plunkar.

resizer.js:

angular.module('mc.resizer', []).directive('resizer', function($document) {
  return function($scope, $element, $attrs) {
    $element.on('mousedown', function(event) {
      event.preventDefault();

      $document.on('mousemove', mousemove);
      $document.on('mouseup', mouseup);
    });

    function mousemove(event) {
      if ($attrs.resizer == 'vertical') {
        // Handle vertical resizer
        var x = event.pageX;

        if ($attrs.resizerMax && x > $attrs.resizerMax) {
          x = parseInt($attrs.resizerMax);
        }

        $element.css({
          left: x + 'px'
        });

        $($attrs.resizerLeft).css({
          width: x + 'px'
        });
        $($attrs.resizerRight).css({
          left: (x + parseInt($attrs.resizerWidth)) + 'px'
        });

      } else {
        // Handle horizontal resizer
        var y = window.innerHeight - event.pageY;
        if((window.innerHeight-100 > y)&&(y>100)){
          $element.css({
            bottom: y + 'px'
          });

          $($attrs.resizerTop).css({
            bottom: (y + parseInt($attrs.resizerHeight)) + 'px'
          });
          $($attrs.resizerBottom).css({
            height: y + 'px'
          });
        }
      }
    }

    function mouseup() {
      $document.unbind('mousemove', mousemove);
      $document.unbind('mouseup', mouseup);
    }
  };
});