sigpro-ui/docs/components/range.md

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 – Full reference for CSS classes.

Live Examples

Basic Range

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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

Live Demo

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