Why does padding affect the width of a slider?

Question

#slider1 {
  -webkit-appearance: slider-vertical;
  width: 1px;
  height: 100px;
}

#slider2 {
  -webkit-appearance: slider-vertical;
  width: 1px;
  height: 100px;
  padding: 0 50px;
}

<input type="range" orient="vertical" id="slider1" />
<input type="range" orient="vertical" id="slider2" />

In slider2, I have added padding 0 50px, and that is the only difference between slider1 and slider2 but it seems like width of slider2 has also changed. Why does this happen? Is there a way to stop it? Thanks!

Answer 1

This appears to be browser-specific, with the effect as described in e.g. Chrome but not in other browsers. It might be worth avoiding simply because of that inconsistency. Using margin instead of padding creates the space on either side of the slider, without affecting the way it looks:

#slider1 {
  -webkit-appearance: slider-vertical;
  width: 1px;
  height: 100px;
}

#slider2 {
  -webkit-appearance: slider-vertical;
  width: 1px;
  height: 100px;
  margin: 0 50px;
}

<input type="range" orient="vertical" id="slider1" />
<input type="range" orient="vertical" id="slider2" />