slider: Align handle size with with pixel grid

Since the handle radius is used to calculate the width and height of the
slider, having the calculated size be a non-integer value can cause the
following widgets in a box-like container to be unaligned with the pixel
grid, which can lead to blurriness or other visual issues.

This for example could be observed with the interface font set to
"Cantarell 12", which results in a handle radius of 8.278. In quick
settings when showing two consecutive sliders, the second slider then
gets rendered at a non-integer vertical offset.

Further having a non-integer size for a StDrawingArea can cause the
texture to get slightly squished or stretched as the size of the cairo
surface is rounded to the nearest pixel, but rendered using the
unrounded actor size.

This commit changes the border radius rather than ceiling the preferred
width/height so that the handle size always matches the width or height
of the widget and there are no visual gaps caused by a partially filled
pixel.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/3648>

js/ui/slider.js

@@ -36,7 +36,8 @@ export const Slider = GObject.registerClass({
         super.vfunc_style_changed();
 
         const themeNode = this.get_theme_node();
-        this._handleRadius = themeNode.get_length('-slider-handle-radius');
+        this._handleRadius =
+            Math.round(2 * themeNode.get_length('-slider-handle-radius')) / 2;
     }
 
     vfunc_repaint() {