How to add a class using less than from a range in input?

I'm having problems with my code. It's supposed to add a class called test to .js-volume when a range in an input is less than 30. It can work if the value in the input is exactly at 30 this.value == 30 but using less than or greater than doesn't work.

JS Code:

$(function() {
  $('.plyr-volume input').on('input',function(){
    if(parseInt(this.value > 30)) {
      $('.js-volume').addClass('test');
    } else {
      $('.js-volume').removeClass('test');
    }
  });
  $('.plyr__volume input').trigger('input');
})();

Demo - https://codepen.io/openbayou/pen/JQeEry