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

Docs Updated

Browse Source
This commit is contained in:
natxocc
2026-04-03 01:41:07 +02:00
parent b0629ef3d0
commit 257107e198
42 changed files with 1529 additions and 6255 deletions
Download Patch File Download Diff File Expand all files Collapse all files

258
docs/components/range.md Normal file
View File

@@ -0,0 +1,258 @@
# Range
Range slider component for selecting numeric values with labels, tooltips, and DaisyUI styling.
## Tag
`Range`
## Props
| Prop | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| `value` | `number \| Signal<number>` | `0` | Current slider value |
| `min` | `number` | `0` | Minimum value |
| `max` | `number` | `100` | Maximum value |
| `step` | `number` | `1` | Step increment |
| `label` | `string \| VNode \| Signal` | `-` | Label text for the slider |
| `tooltip` | `string` | `-` | Tooltip text on hover |
| `disabled` | `boolean \| Signal<boolean>` | `false` | Disabled state |
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
| `oninput` | `function` | `-` | Input event handler |
## Styling
Range supports all **daisyUI Range classes**:
| Category | Keywords | Description |
| :--- | :--- | :--- |
| Color | `range-primary`, `range-secondary`, `range-accent`, `range-info`, `range-success`, `range-warning`, `range-error` | Range color variants |
| Size | `range-xs`, `range-sm`, `range-md`, `range-lg` | Range scale |
> For further details, check the [daisyUI Range Documentation](https://daisyui.com/components/range) – Full reference for CSS classes.
## Live Examples
### Basic Range
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
</div>
</div>
```javascript
const BasicDemo = () => {
const value = $(50);
return Div({ class: 'flex flex-col gap-4' }, [
Range({
label: 'Volume',
value: value,
min: 0,
max: 100,
oninput: (e) => value(parseInt(e.target.value))
}),
Div({ class: 'text-center' }, () => `Value: ${value()}%`)
]);
};
$mount(BasicDemo, '#demo-basic');
```
### With Tooltip
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-tooltip" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
</div>
</div>
```javascript
const TooltipDemo = () => {
const brightness = $(75);
return Div({ class: 'flex flex-col gap-4' }, [
Range({
label: 'Brightness',
value: brightness,
min: 0,
max: 100,
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()}%)` })
]);
};
$mount(TooltipDemo, '#demo-tooltip');
```
### Color Variants
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-colors" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
</div>
</div>
```javascript
const ColorsDemo = () => {
const primary = $(30);
const secondary = $(60);
const accent = $(90);
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) })
]);
};
$mount(ColorsDemo, '#demo-colors');
```
### Size Variants
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-sizes" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
</div>
</div>
```javascript
const SizesDemo = () => {
const xs = $(25);
const sm = $(50);
const md = $(75);
const lg = $(100);
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) }),
Range({ label: 'Large', value: lg, class: 'range-lg', oninput: (e) => lg(e.target.value) })
]);
};
$mount(SizesDemo, '#demo-sizes');
```
### Price Range
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-price" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
</div>
</div>
```javascript
const PriceDemo = () => {
const price = $(500);
const maxPrice = 1000;
return Div({ class: 'flex flex-col gap-4' }, [
Range({
label: 'Price Range',
value: price,
min: 0,
max: maxPrice,
step: 10,
oninput: (e) => price(parseInt(e.target.value))
}),
Div({ class: 'flex justify-between' }, [
Span({}, '$0'),
Span({}, () => `$${price()}`),
Span({}, `$${maxPrice}`)
]),
Div({ class: 'mt-2 text-sm opacity-70' }, () => {
if (price() < 250) return 'Budget friendly';
if (price() < 750) return 'Mid range';
return 'Premium';
})
]);
};
$mount(PriceDemo, '#demo-price');
```
### Audio Controls
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-audio" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
</div>
</div>
```javascript
const AudioDemo = () => {
const volume = $(50);
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' }, '🔊'),
Range({
value: volume,
min: 0,
max: 100,
class: 'range-primary flex-1',
oninput: (e) => volume(e.target.value)
}),
Span({ class: 'w-12 text-right' }, () => `${volume()}%`)
]),
Div({ class: 'flex items-center gap-3' }, [
Span({ class: 'w-12' }, '🎵 Bass'),
Range({
value: bass,
min: 0,
max: 100,
class: 'range-secondary flex-1',
oninput: (e) => bass(e.target.value)
}),
Span({ class: 'w-12 text-right' }, () => `${bass()}%`)
]),
Div({ class: 'flex items-center gap-3' }, [
Span({ class: 'w-12' }, '🎶 Treble'),
Range({
value: treble,
min: 0,
max: 100,
class: 'range-accent flex-1',
oninput: (e) => treble(e.target.value)
}),
Span({ class: 'w-12 text-right' }, () => `${treble()}%`)
])
]);
};
$mount(AudioDemo, '#demo-audio');
```
### All Variants
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
<div class="card-body">
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
</div>
</div>
```javascript
const VariantsDemo = () => {
const value = $(50);
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'),
Range({ tooltip: 'Tooltip message', value: $(50), oninput: (e) => {} }),
Div({ class: 'text-sm font-bold mt-2' }, 'Disabled'),
Range({ disabled: true, value: $(50), oninput: (e) => {} })
]);
};
$mount(VariantsDemo, '#demo-variants');
```