258 lines
7.7 KiB
Markdown
258 lines
7.7 KiB
Markdown
# 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');
|
||
``` |