From 95602e9eb7cfe8d7cee9b5ad1ff3e55c3e5575dc Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Thu, 21 Nov 2024 11:29:34 +0100
Subject: [PATCH 1/4] feat: add contentClass to easier customisation via
 tailwind

---
 packages/x-components/src/components/base-slider.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/x-components/src/components/base-slider.vue b/packages/x-components/src/components/base-slider.vue
index 4fd78e999b..a8759e9fd2 100644
--- a/packages/x-components/src/components/base-slider.vue
+++ b/packages/x-components/src/components/base-slider.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="x-base-slider">
-    <div ref="slider" class="x-base-slider__nouislider" />
+    <div ref="slider" class="x-base-slider__nouislider" :class="contentClass" />
     <div class="x-base-slider__selected">
       <!--
         @slot Default selected range rendering. This slot will be used by default for rendering
@@ -49,6 +49,11 @@
       modelValue: {
         type: Object as PropType<{ min: number; max: number }>,
         required: true
+      },
+      /** Class to be able to customize slider styles. */
+      contentClass: {
+        type: String || Array || Record<string, any>,
+        default: ''
       }
     },
     /**

From 00e1ef5670d0933dddf990c5aba0832a29b7a2a8 Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Thu, 21 Nov 2024 11:30:44 +0100
Subject: [PATCH 2/4] style: rm default box-shadow

---
 packages/x-components/src/components/base-slider.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/x-components/src/components/base-slider.vue b/packages/x-components/src/components/base-slider.vue
index a8759e9fd2..c5ff38fd5e 100644
--- a/packages/x-components/src/components/base-slider.vue
+++ b/packages/x-components/src/components/base-slider.vue
@@ -178,6 +178,10 @@
     padding: 0 16px;
   }
 
+  .x-base-slider__nouislider .noUi-handle {
+    box-shadow: none;
+  }
+
   .x-base-slider__nouislider .noUi-handle:before,
   .x-base-slider__nouislider .noUi-handle:after {
     content: none;

From 604350fee8bf014b85bfd932cbf5d122a9482d21 Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Thu, 21 Nov 2024 12:36:15 +0100
Subject: [PATCH 3/4] fix: bind contentClass correctly, simplify type

---
 packages/x-components/src/components/base-slider.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/x-components/src/components/base-slider.vue b/packages/x-components/src/components/base-slider.vue
index c5ff38fd5e..3b4fe0be99 100644
--- a/packages/x-components/src/components/base-slider.vue
+++ b/packages/x-components/src/components/base-slider.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="x-base-slider">
-    <div ref="slider" class="x-base-slider__nouislider" :class="contentClass" />
+    <div ref="slider" :class="['x-base-slider__nouislider', contentClass]" />
     <div class="x-base-slider__selected">
       <!--
         @slot Default selected range rendering. This slot will be used by default for rendering
@@ -52,7 +52,7 @@
       },
       /** Class to be able to customize slider styles. */
       contentClass: {
-        type: String || Array || Record<string, any>,
+        type: String,
         default: ''
       }
     },

From e0a43daa7342d8b55336a8b9690b4a7a806c321f Mon Sep 17 00:00:00 2001
From: acondal <annac@empathy.co>
Date: Thu, 21 Nov 2024 12:44:22 +0100
Subject: [PATCH 4/4] fix: bind contentClass correctly

---
 packages/x-components/src/components/base-slider.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/x-components/src/components/base-slider.vue b/packages/x-components/src/components/base-slider.vue
index 3b4fe0be99..24808d6364 100644
--- a/packages/x-components/src/components/base-slider.vue
+++ b/packages/x-components/src/components/base-slider.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="x-base-slider">
-    <div ref="slider" :class="['x-base-slider__nouislider', contentClass]" />
+    <div ref="slider" :class="['x-base-slider__nouislider'].concat(`${contentClass}`)" />
     <div class="x-base-slider__selected">
       <!--
         @slot Default selected range rendering. This slot will be used by default for rendering