Skip to content

Commit a1f3047

Browse files
QuentinGabQuentinGab
committed
add support for range
1 parent c7ea439 commit a1f3047

File tree

7 files changed

+164
-25
lines changed

7 files changed

+164
-25
lines changed

‎resources/css/components/range.css‎

Lines changed: 62 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
@layer components {
22
.el-range {
3-
@apply appearance-none inline-block border-0 h-1.5 shadow-none border-none outline-none;
3+
border-radius: inherit;
4+
5+
@apply appearance-none relative inline-flex flex-col border-0 h-1.5 shadow-none border-none outline-none bg-gray-300;
46

57
&::-webkit-slider-thumb {
68
-webkit-appearance: none;
7-
@apply appearance-none pointer-events-auto cursor-pointer size-5 bg-white border-black border-3 rounded-full shadow-none outline-none;
9+
@apply z-10 appearance-none -top-2 relative pointer-events-auto cursor-pointer size-5 bg-white border-black border-3 rounded-full shadow-none outline-none;
810
}
911

1012
&::-moz-range-thumb {
1113
-moz-appearance: none;
12-
@apply appearance-none pointer-events-auto cursor-pointer size-5 bg-white border-black border-3 rounded-full shadow-none outline-none;
14+
@apply z-10 appearance-none -top-2 pointer-events-auto cursor-pointer size-5 bg-white border-black border-3 rounded-full shadow-none outline-none;
1315
}
1416

1517
&[data-color="transparent"] {
@@ -23,32 +25,68 @@
2325
}
2426
}
2527

26-
&[data-color="white"] {
27-
@apply bg-gray-300;
28-
}
29-
&[data-color="black"] {
30-
@apply bg-gray-300;
31-
}
32-
&[data-color="gray"] {
33-
@apply bg-gray-300;
34-
}
3528
&[data-color="emerald"] {
36-
@apply bg-gray-300;
29+
&::-webkit-slider-thumb {
30+
@apply border-emerald-500;
31+
}
32+
&::-moz-range-thumb {
33+
@apply border-emerald-500;
34+
}
3735
}
38-
&[data-color="sky"] {
39-
@apply bg-gray-300;
36+
}
37+
38+
.el-range-container {
39+
@apply relative flex flex-col;
40+
41+
&[data-color="emerald"] {
42+
input::-webkit-slider-thumb {
43+
@apply border-emerald-500;
44+
}
45+
input::-moz-range-thumb {
46+
@apply border-emerald-500;
47+
}
48+
49+
.el-range-tooltip,
50+
.el-range-progress {
51+
@apply bg-emerald-500;
52+
}
4053
}
54+
4155
&[data-color="rose"] {
42-
@apply bg-gray-300;
43-
}
44-
&[data-color="purple"] {
45-
@apply bg-gray-300;
46-
}
47-
&[data-color="yellow"] {
48-
@apply bg-gray-300;
56+
input::-webkit-slider-thumb {
57+
@apply border-rose-500;
58+
}
59+
input::-moz-range-thumb {
60+
@apply border-rose-500;
61+
}
62+
63+
.el-range-tooltip,
64+
.el-range-progress {
65+
@apply bg-rose-500;
66+
}
4967
}
50-
&[data-color="amber"] {
51-
@apply bg-gray-300;
68+
}
69+
70+
.el-range-tooltip-container {
71+
@apply absolute bottom-full pb-2 -translate-x-1/2 left-0 min-w-3;
72+
will-change: left;
73+
}
74+
75+
.el-range-tooltip {
76+
@apply bg-black p-1 text-xs font-semibold text-white;
77+
}
78+
79+
.el-range-ticks {
80+
@apply flex flex-row justify-between w-full min-h-1;
81+
82+
option {
83+
@apply bg-gray-300 w-px flex-none min-h-0;
5284
}
5385
}
86+
87+
.el-range-progress {
88+
@apply absolute left-0 top-0 bg-black h-1.5 z-0;
89+
border-radius: inherit;
90+
will-change: width;
91+
}
5492
}

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

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
@props(['color' => 'black'])
2+
3+
<div {{ $attributes->class(['el-range-container']) }} x-data="{
4+
value: 0,
5+
get min() {
6+
return this.input.min || 0;
7+
},
8+
get max() {
9+
return this.input.max || 1;
10+
},
11+
get step() {
12+
return this.input.step || 1;
13+
},
14+
get input() {
15+
return this.$refs.input;
16+
},
17+
get progress() {
18+
return (this.value - this.min) / (this.max - this.min);
19+
},
20+
get ticks() {
21+
return this.range(this.min, this.max, this.step);
22+
},
23+
range(min, max, step = 1) {
24+
const len = Math.floor((max - min) / step) + 1;
25+
return Array.from({ length: Math.max(len, 0) }, (_, i) => min + i * step);
26+
},
27+
init() {
28+
this.value = this.$refs.input.value;
29+
},
30+
}" x-modelable="value"
31+
data-color="{{ $color }}">
32+
{{ $slot }}
33+
</div>

‎resources/views/components/range/progress.blade.php‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div {{ $attributes->class('el-range-progress') }} x-bind:style="{
2+
'width': `${progress*100}%`
3+
}"></div>

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

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
<datalist {{ $attributes->class('el-range-ticks') }}>
2+
3+
@if ($slot->isEmpty())
4+
<template x-for="i in ticks" x-bind:key="i">
5+
<option x-bind:value="i"></option>
6+
</template>
7+
@else
8+
{{ $slot }}
9+
@endif
10+
</datalist>

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<div {{ $attributes->class(['el-range-tooltip-container']) }} x-bind:style="{
2+
'left': `${progress*100}%`
3+
}">
4+
{{ $slot }}
5+
</div>

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<div {{ $attributes->class(['el-range-tooltip']) }}>
2+
@if ($slot)
3+
<span x-text="value"></span>
4+
@else
5+
{{ $slot }}
6+
@endif
7+
</div>

‎workbench/resources/views/demo.blade.php‎

Lines changed: 44 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -508,7 +508,50 @@ class="w-1/2 rounded-md ring-1 ring-inset" />
508508
<h1 class="font-semibold">Range</h1>
509509
</div>
510510
<div class="flex grow items-center justify-center gap-2 border-b border-gray-200">
511-
<x-kit::range color="transparent" class="rounded-md" />
511+
<x-kit::range color="black" min="-50" max="50" step="10" value="0"
512+
class="relative rounded-full" />
513+
</div>
514+
</div>
515+
516+
<div class="isolate flex flex-col">
517+
<div class="p-3">
518+
<h1 class="font-semibold">Range</h1>
519+
</div>
520+
<div class="flex grow items-center justify-center gap-2 border-b border-gray-200">
521+
<x-kit::range.container class="w-52 rounded-full">
522+
<x-kit::range color="black" min="-50" max="50" step="10" value="0"
523+
class="mb-1 w-full" list="range-values" x-model="value" x-ref="input" />
524+
525+
<x-kit::range.ticks class="px-2.5" id="range-values" />
526+
527+
<x-kit::range.tooltip.container>
528+
<x-kit::range.tooltip class="rounded" />
529+
</x-kit::range.tooltip.container>
530+
531+
<x-kit::range.progress />
532+
533+
</x-kit::range.container>
534+
</div>
535+
</div>
536+
537+
<div class="isolate flex flex-col">
538+
<div class="p-3">
539+
<h1 class="font-semibold">Colored Range</h1>
540+
</div>
541+
<div class="flex grow items-center justify-center gap-2 border-b border-gray-200">
542+
<x-kit::range.container color="emerald" class="w-52 rounded-full">
543+
<x-kit::range min="-50" max="50" step="10" value="0" class="mb-1 w-full"
544+
x-model="value" x-ref="input" />
545+
546+
<x-kit::range.ticks class="px-2.5" />
547+
548+
<x-kit::range.tooltip.container>
549+
<x-kit::range.tooltip class="rounded" />
550+
</x-kit::range.tooltip.container>
551+
552+
<x-kit::range.progress />
553+
554+
</x-kit::range.container>
512555
</div>
513556
</div>
514557

0 commit comments

Comments
 (0)