noUiSlider slider as a ruler to calculate height in cm

Question

I'm trying to create a slider in the shape and functionality of a ruler in cm from 140cm to 210cm so that I can select those main values (140, 150 ..etc) as well as the numbers in between (141, 142, ..etc). I created the shape but it's not working as it should be.

HTML:

<div id="height_slider"></div>

CSS:

#height_slider{
  position: absolute;
  right: 50px;
  top: 0;
  height: 100%;
}

.noUi-pips-vertical{
  right: -30px;
  direction: rtl;
}

.noUi-value-vertical{
  padding: 0;
  margin-right: 70px;
  color: #21397D;
  font-size: 20px;
  font-weight: bold;
  direction: ltr;
}

.noUi-vertical{
  height: 80%;
}

.noUi-marker-vertical.noUi-marker{
  width: 35px;
  background: #21397D;
  height: 1px;
}

.noUi-marker-vertical.noUi-marker-large{
  width: 50px;
  height: 2px;
}

.noUi-base{
  background: none;
}

.noUi-vertical .noUi-handle{
  width: 35px;
  height: 1px;
  background: #269B53;
  border: 0;
  box-shadow: unset;
  right: -20px;
  cursor: move;
  border-radius: 0;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -ms-border-radius: 0;
  -o-border-radius: 0;
}

.noUi-vertical .noUi-handle::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  background: transparent;
  left: auto;
  width: 0;
  height: 0;
  transform: translateY(-50%);
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-left: 7px solid transparent;
  border-right: 7px solid #269B53;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
}

Javascript:

noUiSlider.create(document.querySelector("#height_slider"), {
  start: 160,
  range: {
    min: 140,
    max: 210
  },
  orientation: "vertical",
  connect: false,
  step: 1,
  pips: {
    mode: "values",
    values: [140, 150, 160, 170, 180, 190, 200, 210],
    density: 1.6,
    format: {
      to: function(a){
        return a + ' cm';
      }
    }
  }
});

Here is a live fiddle to test it: https://jsfiddle.net/ekq6o7rp

As you can see the handler in green at the right should point to '160 cm' as I specified in the options start: 160. Maybe I misunderstood the options so it's not pointing to the right value.

The handler should be dragged to a line only not to white space so if it's pointing to '160 cm' and I drag it to the bottom it should move to the line beneath which represents 159.

UPDATED @RenevanderLende comment css fix the initial position of the handle. I'm still trying to figure out how to fix the positions where the handle stops. It should be positioned on lines only not on a white space between these lines.