Highcharts Angular: adding a good range and a bad range color

I have a column chart implemented. Now, I have to add good range and bad range values for the same.
Good range and bad range both will have radio buttons to choose between '<' and '>' and an input field to add the value each.
For the series points falling within good range value, columns will turn green. Similarly, the points withing bad range value will turn the column red. All other columns with values inbetween will turn gray.
I am able to achieve this using zones.

However, it is achievable only when bad range operator is '<' and good range operator is '>'.

When I choose the bad range operator as '>' and good range operator as '<', all the column turns red.

Below JSFiddle is the approach I have used. (Please note, it is not the full code) https://jsfiddle.net/8np6rqh0/1/

Input fields looks like these;

This is what I want to achieve;