# 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');
```