Range

Range slider allows the user to select a value from a range. Supports labels, value display, and reactive state binding.

Basic Examples

Range sliders with various configurations

// Dynamic import of the Range component

const { default: Range } = await import('/components/data-input/range.js');

const { tags, $ } = Lightview;
const { div } = tags;

// 1. Basic range
const basic = Range({ 
    min: 0,
    max: 100,
    defaultValue: 50
});

// 2. Range with label and value display
const withLabel = Range({ 
    label: 'Volume',
    min: 0,
    max: 100,
    defaultValue: 75,
    showValue: true,
    color: 'primary'
});

// 3. Range with custom formatting
const formatted = Range({ 
    label: 'Price Range',
    min: 0,
    max: 1000,
    step: 50,
    defaultValue: 500,
    showValue: true,
    formatValue: (v) => `$${v}`,
    color: 'accent'
});

// Insert all examples
$('#demo').insert(
    div({ class: 'space-y-6 max-w-md' }, basic, withLabel, formatted)
);

Reactive Example

Two-way binding with signals


const { default: Range } = await import('/components/data-input/range.js');

const { signal, tags, $ } = Lightview;
const { div, p } = tags;

// Signals for values
const brightness = signal(70);
const contrast = signal(50);
const saturation = signal(100);

// Reactive range sliders
const reactiveDemo = div({ class: 'space-y-4 max-w-md' },
    Range({ 
        label: 'Brightness',
        min: 0, max: 100,
        value: brightness,
        showValue: true,
        formatValue: (v) => `${v}%`,
        color: 'warning'
    }),
    Range({ 
        label: 'Contrast',
        min: 0, max: 100,
        value: contrast,
        showValue: true,
        formatValue: (v) => `${v}%`,
        color: 'info'
    }),
    Range({ 
        label: 'Saturation',
        min: 0, max: 200,
        value: saturation,
        showValue: true,
        formatValue: (v) => `${v}%`,
        color: 'success'
    }),
    div({ class: 'divider' }),
    p({ class: 'text-sm font-mono opacity-70' },
        () => `B: ${brightness.value}% | C: ${contrast.value}% | S: ${saturation.value}%`
    )
);

$('#demo').insert(reactiveDemo);

Props

Prop Type Default Description
value number | signal - Current value (reactive with signals)
defaultValue number 0 Default value for uncontrolled mode
min number 0 Minimum value
max number 100 Maximum value
step number 1 Step increment
label string - Label text displayed above the range
helper string - Helper text displayed below the range
showValue boolean false Display current value
formatValue function (v) => v Format function for displayed value
color string - 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
size string 'md' 'xs' | 'sm' | 'md' | 'lg'
disabled boolean false Disable the range slider
onChange function - Callback when value changes: (value, event) => void
useShadow boolean * Render in Shadow DOM

Colors

Sizes

With Steps

|||||
For more examples and options, see the DaisyUI Range documentation.