diff --git a/packages/x-components/src/components/base-slider.vue b/packages/x-components/src/components/base-slider.vue
index 24808d6364..d98499163d 100644
--- a/packages/x-components/src/components/base-slider.vue
+++ b/packages/x-components/src/components/base-slider.vue
@@ -179,9 +179,18 @@
   }
 
   .x-base-slider__nouislider .noUi-handle {
+    height: 32px;
+    width: 32px;
+    top: -8px;
+    right: -16px; /* half the width */
+    border-radius: 9999px;
     box-shadow: none;
   }
 
+  .noUi-target {
+    border-radius: 16px;
+  }
+
   .x-base-slider__nouislider .noUi-handle:before,
   .x-base-slider__nouislider .noUi-handle:after {
     content: none;