CODEWITHSUNDEEP
htmlcssgoogle-chromemicrosoft-edge
Will
Will

Reputation: 541

How to solve thumb slider vertical alignment issue for Chrome and Edge?

I want thumb slider that is larger than the track and middle aligned to it.

I strip the default style:

input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}

And add new style:

input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #009fda;
cursor: pointer;
}

In Chrome, this makes the thumb off center. enter image description here

But it appears correct for Edge: enter image description here

If I add a margin-top to compensate:

input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #009fda;
cursor: pointer;
**margin-top: -7px;**
}

It corrects it in Chrome: enter image description here

But breaks it in Edge:

enter image description here

Is there a way to apply to only apply a margin-top property for Chrome? Or some other way to achieve the same desired end?

Please see CSS arcticale https://css-tricks.com/sliding-nightmare-understanding-range-input/ for more info:

Vertically, the thumb is middle-aligned to the track in Firefox, seemingly middle-aligned in Edge, though I've been getting very confusing different results over multiple tests of the same situation, and the top of its border-box is aligned to the top of the track's content-box in Chrome once we've set -webkit-appearance: none on the actual input and on the thumb so that we can style the slider.

While the Chrome decision seems weird at first, is annoying in most cases and lately has even contributed to breaking things in... Edge (but more about that in a moment), there is some logic behind it. By default, the height of the track in Chrome is determined by that of the thumb and if we look at things this way, the top alignment doesn't seem like complete insanity anymore.

However, we often want a thumb that's bigger than the track's height and is middle aligned to the track. We can correct the Chrome alignment with margin-top in the styles we set on the ::-webkit-slider-thumb pseudo.

Unfortunately, this way we're breaking the vertical alignment in Edge. This is because Edge now applies the styles set via ::-webkit-slider-thumb as well.

Upvotes: 1

Views: 4618

Answers (1)

gregwhitworth
gregwhitworth

Reputation: 2178

We added support for -webkit prefixes due to their prevalence on the web (primarily mobile) and by supporting them this gave our users a better experience. The way to fix your issue to simply reset the margin using -ms-thumb as Chrome does not support this:

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #009fda;
  cursor: pointer;
  margin: 7px; /* alignment fix for Chrome */
}

input[type="range"]::-ms-thumb {
  margin: 0; /* Reset margin in Edge since it supports -webkit-slider-thumb as well */
}

This results in center alignment of the thumb as you were desiring, you can see it here: http://jsbin.com/bawuhofuqa/edit?html,css,output

Hope that helps, let me know if you have any further questions.

Upvotes: 1

Related Questions