fix range on safari

Author: QuentinGab

resources/css/components/range.css

@@ -68,7 +68,7 @@
     }
 
     .el-range-tooltip-container {
-        @apply absolute bottom-full pb-2 -translate-x-1/2 left-0 min-w-3;
+        @apply absolute bottom-full pb-2.5 -translate-x-1/2 left-0 min-w-3;
         will-change: left;
     }
 
@@ -79,7 +79,7 @@
     .el-range-ticks {
         @apply flex flex-row justify-between w-full min-h-1;
 
-        option {
+        & > * {
             @apply bg-gray-300 w-px flex-none min-h-0;
         }
     }

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

@@ -3,13 +3,13 @@
 <div {{ $attributes->class(['el-range-container']) }} x-data="{
     value: 0,
     get min() {
-        return this.input.min || 0;
+        return parseInt(this.input.min || 0);
     },
     get max() {
-        return this.input.max || 1;
+        return parseInt(this.input.max || 1);
     },
     get step() {
-        return this.input.step || 1;
+        return parseInt(this.input.step || 1);
     },
     get input() {
         return this.$refs.input;

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

@@ -1,10 +1,10 @@
-<datalist {{ $attributes->class('el-range-ticks') }}>
+<div {{ $attributes->class('el-range-ticks') }}>
 
     @if ($slot->isEmpty())
         <template x-for="i in ticks" x-bind:key="i">
-            <option x-bind:value="i"></option>
+            <div x-bind:value="i"></div>
         </template>
     @else
         {{ $slot }}
     @endif
-</datalist>
+</div>

workbench/resources/views/demo.blade.php

@@ -520,9 +520,9 @@ class="relative rounded-full" />
             <div class="flex grow items-center justify-center gap-2 border-b border-gray-200">
                 <x-kit::range.container class="w-52 rounded-full">
                     <x-kit::range color="black" min="-50" max="50" step="10" value="0"
-                        class="mb-1 w-full" list="range-values" x-model="value" x-ref="input" />
+                        class="mb-1 w-full" x-model="value" x-ref="input" />
 
-                    <x-kit::range.ticks class="px-2.5" id="range-values" />
+                    <x-kit::range.ticks class="px-2.5" />
 
                     <x-kit::range.tooltip.container>
                         <x-kit::range.tooltip class="rounded" />