[READ-ONLY] Mirror of https://github.com/flo-bit/ui-kit. 🦊 fox ui, svelte 5 and tailwind 4
flo-bit.dev/ui-kit/
svelte
tailwindcss
ui-components
rename back
+59
-59
-59
src/lib/components/base/slider/Slider-renamed.svelte
-59
src/lib/components/base/slider/Slider-renamed.svelte
···
1
-
<script lang="ts">
2
-
import { Slider as SliderPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
3
-
import { cn } from '$lib/utils';
4
-
5
-
let {
6
-
ref = $bindable(null),
7
-
value = $bindable(),
8
-
orientation = 'horizontal',
9
-
class: className,
10
-
tabindex = undefined,
11
-
type = 'single',
12
-
}: WithoutChildrenOrChild<SliderPrimitive.RootProps> = $props();
13
-
</script>
14
-
15
-
<!--
16
-
Discriminated Unions + Destructing (required for bindable) do not
17
-
get along, so we shut typescript up by casting `value` to `never`.
18
-
-->
19
-
<SliderPrimitive.Root
20
-
bind:ref
21
-
bind:value={value as never}
22
-
{orientation}
23
-
class={cn(
24
-
"relative flex touch-none items-center select-none data-[orientation='horizontal']:w-full data-[orientation='vertical']:h-full",
25
-
"data-[orientation='vertical']:min-h-44 data-[orientation='vertical']:w-auto data-[orientation='vertical']:flex-col",
26
-
className
27
-
)}
28
-
{tabindex}
29
-
{type}
30
-
>
31
-
{#snippet children({ thumbs })}
32
-
<span
33
-
data-orientation={orientation}
34
-
class={[
35
-
"relative grow overflow-hidden rounded-full data-[orientation='horizontal']:h-2 data-[orientation='horizontal']:w-full",
36
-
"data-[orientation='vertical']:h-full data-[orientation='vertical']:w-2"
37
-
]}
38
-
>
39
-
<div
40
-
class="bg-base-300/30 dark:bg-base-800 border-base-400/50 dark:border-base-700 absolute inset-0 rounded-full border"
41
-
></div>
42
-
43
-
<SliderPrimitive.Range
44
-
class="bg-accent-400 dark:bg-accent-600 absolute rounded-full data-[orientation='horizontal']:h-full data-[orientation='vertical']:w-full"
45
-
/>
46
-
</span>
47
-
{#each thumbs as thumb}
48
-
<SliderPrimitive.Thumb
49
-
index={thumb}
50
-
class={[
51
-
'border-accent-400 dark:border-accent-600 bg-accent-600 dark:bg-accent-800 focus-visible:outline-base-900',
52
-
'dark:focus-visible:outline-base-100 block size-6 rounded-full border-2 transition-colors focus-visible:outline-2 ',
53
-
'focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50'
54
-
]}
55
-
{tabindex}
56
-
/>
57
-
{/each}
58
-
{/snippet}
59
-
</SliderPrimitive.Root>
+59
src/lib/components/base/slider/Slider.svelte
+59
src/lib/components/base/slider/Slider.svelte
···
1
+
<script lang="ts">
2
+
import { Slider as SliderPrimitive, type WithoutChildrenOrChild } from 'bits-ui';
3
+
import { cn } from '$lib/utils';
4
+
5
+
let {
6
+
ref = $bindable(null),
7
+
value = $bindable(),
8
+
orientation = 'horizontal',
9
+
class: className,
10
+
tabindex = undefined,
11
+
type = 'single',
12
+
}: WithoutChildrenOrChild<SliderPrimitive.RootProps> = $props();
13
+
</script>
14
+
15
+
<!--
16
+
Discriminated Unions + Destructing (required for bindable) do not
17
+
get along, so we shut typescript up by casting `value` to `never`.
18
+
-->
19
+
<SliderPrimitive.Root
20
+
bind:ref
21
+
bind:value={value as never}
22
+
{orientation}
23
+
class={cn(
24
+
"relative flex touch-none items-center select-none data-[orientation='horizontal']:w-full data-[orientation='vertical']:h-full",
25
+
"data-[orientation='vertical']:min-h-44 data-[orientation='vertical']:w-auto data-[orientation='vertical']:flex-col",
26
+
className
27
+
)}
28
+
{tabindex}
29
+
{type}
30
+
>
31
+
{#snippet children({ thumbs })}
32
+
<span
33
+
data-orientation={orientation}
34
+
class={[
35
+
"relative grow overflow-hidden rounded-full data-[orientation='horizontal']:h-2 data-[orientation='horizontal']:w-full",
36
+
"data-[orientation='vertical']:h-full data-[orientation='vertical']:w-2"
37
+
]}
38
+
>
39
+
<div
40
+
class="bg-base-300/30 dark:bg-base-800 border-base-400/50 dark:border-base-700 absolute inset-0 rounded-full border"
41
+
></div>
42
+
43
+
<SliderPrimitive.Range
44
+
class="bg-accent-400 dark:bg-accent-600 absolute rounded-full data-[orientation='horizontal']:h-full data-[orientation='vertical']:w-full"
45
+
/>
46
+
</span>
47
+
{#each thumbs as thumb}
48
+
<SliderPrimitive.Thumb
49
+
index={thumb}
50
+
class={[
51
+
'border-accent-400 dark:border-accent-600 bg-accent-600 dark:bg-accent-800 focus-visible:outline-base-900',
52
+
'dark:focus-visible:outline-base-100 block size-6 rounded-full border-2 transition-colors focus-visible:outline-2 ',
53
+
'focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50'
54
+
]}
55
+
{tabindex}
56
+
/>
57
+
{/each}
58
+
{/snippet}
59
+
</SliderPrimitive.Root>