natxocc/sigpro-ui
1
1
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

adapt new Input
All checks were successful
Deploy Docs to Synology / deploy (push) Successful in 3s
Details

Browse Source
This commit is contained in:
Natxo
2026-04-23 13:22:49 +02:00
parent 59e6d972a8
commit e842ed8041
61 changed files with 2553 additions and 2758 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
docs/components/range.md
View File

@@ -46,7 +46,7 @@ Range supports all **daisyUI Range classes**:
const BasicDemo = () => {
const value = $(50);
return Div({ class: 'flex flex-col gap-4' }, [
return div({ class: 'flex flex-col gap-4' }, [
Range({
label: 'Volume',
value: value,
@@ -54,7 +54,7 @@ const BasicDemo = () => {
max: 100,
oninput: (e) => value(parseInt(e.target.value))
}),
Div({ class: 'text-center' }, () => `Value: ${value()}%`)
div({ class: 'text-center' }, () => `Value: ${value()}%`)
]);
};
mount(BasicDemo, '#demo-basic');
@@ -73,7 +73,7 @@ mount(BasicDemo, '#demo-basic');
const TooltipDemo = () => {
const brightness = $(75);
return Div({ class: 'flex flex-col gap-4' }, [
return div({ class: 'flex flex-col gap-4' }, [
Range({
label: 'Brightness',
value: brightness,
@@ -82,7 +82,7 @@ const TooltipDemo = () => {
tooltip: () => `${brightness()}% brightness`,
oninput: (e) => brightness(parseInt(e.target.value))
}),
Div({ class: 'w-full h-20 rounded-lg transition-all', style: () => `background-color: hsl(0, 0%, ${brightness()}%)` })
div({ class: 'w-full h-20 rounded-lg transition-all', style: () => `background-color: hsl(0, 0%, ${brightness()}%)` })
]);
};
mount(TooltipDemo, '#demo-tooltip');
@@ -103,7 +103,7 @@ const ColorsDemo = () => {
const secondary = $(60);
const accent = $(90);
return Div({ class: 'flex flex-col gap-4' }, [
return div({ class: 'flex flex-col gap-4' }, [
Range({ label: 'Primary', value: primary, class: 'range-primary', oninput: (e) => primary(e.target.value) }),
Range({ label: 'Secondary', value: secondary, class: 'range-secondary', oninput: (e) => secondary(e.target.value) }),
Range({ label: 'Accent', value: accent, class: 'range-accent', oninput: (e) => accent(e.target.value) })
@@ -128,7 +128,7 @@ const SizesDemo = () => {
const md = $(75);
const lg = $(100);
return Div({ class: 'flex flex-col gap-4' }, [
return div({ class: 'flex flex-col gap-4' }, [
Range({ label: 'Extra Small', value: xs, class: 'range-xs', oninput: (e) => xs(e.target.value) }),
Range({ label: 'Small', value: sm, class: 'range-sm', oninput: (e) => sm(e.target.value) }),
Range({ label: 'Medium', value: md, class: 'range-md', oninput: (e) => md(e.target.value) }),
@@ -152,7 +152,7 @@ const PriceDemo = () => {
const price = $(500);
const maxPrice = 1000;
return Div({ class: 'flex flex-col gap-4' }, [
return div({ class: 'flex flex-col gap-4' }, [
Range({
label: 'Price Range',
value: price,
@@ -161,12 +161,12 @@ const PriceDemo = () => {
step: 10,
oninput: (e) => price(parseInt(e.target.value))
}),
Div({ class: 'flex justify-between' }, [
Span({}, '$0'),
Span({}, () => `$${price()}`),
Span({}, `$${maxPrice}`)
div({ class: 'flex justify-between' }, [
span({}, '$0'),
span({}, () => `$${price()}`),
span({}, `$${maxPrice}`)
]),
Div({ class: 'mt-2 text-sm opacity-70' }, () => {
div({ class: 'mt-2 text-sm opacity-70' }, () => {
if (price() < 250) return 'Budget friendly';
if (price() < 750) return 'Mid range';
return 'Premium';
@@ -191,9 +191,9 @@ const AudioDemo = () => {
const bass = $(40);
const treble = $(60);
return Div({ class: 'flex flex-col gap-4' }, [
Div({ class: 'flex items-center gap-3' }, [
Span({ class: 'w-12' }, '🔊'),
return div({ class: 'flex flex-col gap-4' }, [
div({ class: 'flex items-center gap-3' }, [
span({ class: 'w-12' }, '🔊'),
Range({
value: volume,
min: 0,
@@ -201,10 +201,10 @@ const AudioDemo = () => {
class: 'range-primary flex-1',
oninput: (e) => volume(e.target.value)
}),
Span({ class: 'w-12 text-right' }, () => `${volume()}%`)
span({ class: 'w-12 text-right' }, () => `${volume()}%`)
]),
Div({ class: 'flex items-center gap-3' }, [
Span({ class: 'w-12' }, '🎵 Bass'),
div({ class: 'flex items-center gap-3' }, [
span({ class: 'w-12' }, '🎵 Bass'),
Range({
value: bass,
min: 0,
@@ -212,10 +212,10 @@ const AudioDemo = () => {
class: 'range-secondary flex-1',
oninput: (e) => bass(e.target.value)
}),
Span({ class: 'w-12 text-right' }, () => `${bass()}%`)
span({ class: 'w-12 text-right' }, () => `${bass()}%`)
]),
Div({ class: 'flex items-center gap-3' }, [
Span({ class: 'w-12' }, '🎶 Treble'),
div({ class: 'flex items-center gap-3' }, [
span({ class: 'w-12' }, '🎶 Treble'),
Range({
value: treble,
min: 0,
@@ -223,7 +223,7 @@ const AudioDemo = () => {
class: 'range-accent flex-1',
oninput: (e) => treble(e.target.value)
}),
Span({ class: 'w-12 text-right' }, () => `${treble()}%`)
span({ class: 'w-12 text-right' }, () => `${treble()}%`)
])
]);
};
@@ -243,14 +243,14 @@ mount(AudioDemo, '#demo-audio');
const VariantsDemo = () => {
const value = $(50);
return Div({ class: 'flex flex-col gap-4' }, [
Div({ class: 'text-sm font-bold' }, 'With Label'),
return div({ class: 'flex flex-col gap-4' }, [
div({ class: 'text-sm font-bold' }, 'With Label'),
Range({ label: 'Label', value: $(50), oninput: (e) => {} }),
Div({ class: 'text-sm font-bold mt-2' }, 'With Tooltip'),
div({ class: 'text-sm font-bold mt-2' }, 'With Tooltip'),
Range({ tooltip: 'Tooltip message', value: $(50), oninput: (e) => {} }),
Div({ class: 'text-sm font-bold mt-2' }, 'Disabled'),
div({ class: 'text-sm font-bold mt-2' }, 'Disabled'),
Range({ disabled: true, value: $(50), oninput: (e) => {} })
]);
};