support transparent range

Author: QuentinGab

resources/css/components/range.css

@@ -0,0 +1,54 @@
+@layer components {
+    .el-range {
+        @apply appearance-none inline-block border-0 h-1.5;
+
+        &::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            @apply appearance-none pointer-events-auto cursor-pointer size-5 bg-white border-black border-3 rounded-full;
+        }
+
+        &::-moz-range-thumb {
+            -moz-appearance: none;
+            @apply appearance-none pointer-events-auto cursor-pointer size-5 bg-white border-black border-3 rounded-full;
+        }
+
+        &[data-color="transparent"] {
+            @apply bg-transparent;
+
+            &::-webkit-slider-thumb {
+                @apply bg-transparent border-transparent;
+            }
+            &::-moz-range-thumb {
+                @apply bg-transparent border-transparent;
+            }
+        }
+
+        &[data-color="white"] {
+            @apply bg-gray-300;
+        }
+        &[data-color="black"] {
+            @apply bg-gray-300;
+        }
+        &[data-color="gray"] {
+            @apply bg-gray-300;
+        }
+        &[data-color="emerald"] {
+            @apply bg-gray-300;
+        }
+        &[data-color="sky"] {
+            @apply bg-gray-300;
+        }
+        &[data-color="rose"] {
+            @apply bg-gray-300;
+        }
+        &[data-color="purple"] {
+            @apply bg-gray-300;
+        }
+        &[data-color="yellow"] {
+            @apply bg-gray-300;
+        }
+        &[data-color="amber"] {
+            @apply bg-gray-300;
+        }
+    }
+}

resources/css/styles.css

@@ -16,3 +16,4 @@
 @import "./components/checkbox.css";
 @import "./components/radio.css";
 @import "./components/select.css";
+@import "./components/range.css";

resources/views/components/button/index.blade.php

@@ -34,7 +34,7 @@
             $iconAttributes = is_object($icon) ? $icon->attributes : new \Illuminate\View\ComponentAttributeBag();
         @endphp
 
-        <x-kit::button.icon :icon="$icon" :offset="$offset" :size="$size" :badge="$badge" :attributes="$iconAttributes" />
+        <x-kit::button.icon :icon="$icon" :offset="$offset" :badge="$badge" :attributes="$iconAttributes" />
     @endif
 
     @if ($slot->hasActualContent() || $content)
@@ -65,7 +65,7 @@
                 : new \Illuminate\View\ComponentAttributeBag();
         @endphp
 
-        <x-kit::button.icon :icon="$iconRight" :offset="$offset" :size="$size" :attributes="$iconAttributes" />
+        <x-kit::button.icon :icon="$iconRight" :offset="$offset" :attributes="$iconAttributes" />
     @endif
 
     <span class="el-loader">

resources/views/components/range/index.blade.php

@@ -0,0 +1,8 @@
+@props([
+    'disabled' => false,
+    'required' => false,
+    'color' => 'black',
+])
+
+<input {{ $attributes->class(['el-range']) }} type="range" data-color="{{ $color }}" @disabled($disabled)
+    @required($required) />

resources/views/components/switch/index.blade.php

@@ -7,4 +7,4 @@
 ])
 
 <input {!! $attributes->class(['el-switch']) !!} data-color="{{ $color }}" type="{{ $type }}" @disabled($disabled)
-    @checked($checked) @required($required)>
+    @checked($checked) @required($required) />

workbench/resources/views/demo.blade.php

@@ -503,6 +503,14 @@ class="w-1/2 rounded-md ring-1 ring-inset" />
             </div>
         </div>
 
+        <div class="isolate flex flex-col">
+            <div class="p-3">
+                <h1 class="font-semibold">Range</h1>
+            </div>
+            <div class="flex grow items-center justify-center gap-2 border-b border-gray-200">
+                <x-kit::range color="transparent" class="rounded-md" />
+            </div>
+        </div>
 
     </div>
 </body>