diff --git a/packages/ui/src/components/Form/Range/ColorHueRange.vue b/packages/ui/src/components/Form/Range/ColorHueRange.vue
index c48d4f9e9..6c0cad84b 100644
--- a/packages/ui/src/components/Form/Range/ColorHueRange.vue
+++ b/packages/ui/src/components/Form/Range/ColorHueRange.vue
@@ -23,10 +23,10 @@ const sliderValue = computed({
   <input
     v-model.number="sliderValue"
     type="range" min="0" max="360" step="0.01"
-    class="color-hue-range"
-    transition="all ease-in-out duration-250"
     :disabled="props.disabled"
     :class="[
+      'color-hue-range',
+      'transition-all ease-in-out duration-250',
       props.disabled ? 'opacity-25 cursor-not-allowed' : 'cursor-pointer',
       props.class || '',
     ]"