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 

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
$('#example').content(
    div({ style: 'display: flex; flex-direction: column; gap: 1.5rem; max-width: 28rem' }, basic, withLabel, formatted)
);
const { default: Range } = await import('/components/data-input/range.js');
const { $ } = Lightview;

const basic = {
    tag: Range,
    attributes: { 
        min: 0,
        max: 100,
        defaultValue: 50
    }
};

const withLabel = {
    tag: Range,
    attributes: { 
        label: 'Volume',
        min: 0,
        max: 100,
        defaultValue: 75,
        showValue: true,
        color: 'primary'
    }
};

const formatted = {
    tag: Range,
    attributes: { 
        label: 'Price Range',
        min: 0,
        max: 1000,
        step: 50,
        defaultValue: 500,
        showValue: true,
        formatValue: (v) => `$${v}`,
        color: 'accent'
    }
};

$('#example').content({
    tag: 'div',
    attributes: { style: 'display: flex; flex-direction: column; gap: 1.5rem; max-width: 28rem' },
    children: [basic, withLabel, formatted]
});
const { default: Range } = await import('/components/data-input/range.js');
const { tags, $ } = Lightview;
tags.Range = Range;

$('#example').content({
    div: {
        style: 'display: flex; flex-direction: column; gap: 1.5rem; max-width: 28rem',
        children: [
            { 
                Range: { 
                    min: 0,
                    max: 100,
                    defaultValue: 50
                } 
            },
            { 
                Range: { 
                    label: 'Volume',
                    min: 0,
                    max: 100,
                    defaultValue: 75,
                    showValue: true,
                    color: 'primary'
                } 
            },
            { 
                Range: { 
                    label: 'Price Range',
                    min: 0,
                    max: 1000,
                    step: 50,
                    defaultValue: 500,
                    showValue: true,
                    formatValue: (v) => `$${v}`,
                    color: 'accent'
                } 
            }
        ]
    }
});

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({ style: 'display: flex; flex-direction: column; gap: 1rem; max-width: 28rem' },
    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}%`
    )
);

$('#example').content(reactiveDemo);
const { default: Range } = await import('/components/data-input/range.js');
const { signal, $ } = Lightview;

const brightness = signal(70);
const contrast = signal(50);
const saturation = signal(100);

const reactiveDemo = {
    tag: 'div',
    attributes: { style: 'display: flex; flex-direction: column; gap: 1rem; max-width: 28rem' },
    children: [
        {
            tag: Range,
            attributes: {
                label: 'Brightness',
                min: 0, max: 100,
                value: brightness,
                showValue: true,
                formatValue: (v) => `${v}%`,
                color: 'warning'
            }
        },
        {
            tag: Range,
            attributes: {
                label: 'Contrast',
                min: 0, max: 100,
                value: contrast,
                showValue: true,
                formatValue: (v) => `${v}%`,
                color: 'info'
            }
        },
        {
            tag: Range,
            attributes: {
                label: 'Saturation',
                min: 0, max: 200,
                value: saturation,
                showValue: true,
                formatValue: (v) => `${v}%`,
                color: 'success'
            }
        },
        { tag: 'div', attributes: { class: 'divider' } },
        {
            tag: 'p',
            attributes: { class: 'text-sm font-mono opacity-70' },
            children: [
                () => `B: ${brightness.value}% | C: ${contrast.value}% | S: ${saturation.value}%`
            ]
        }
    ]
};

$('#example').content(reactiveDemo);
const { default: Range } = await import('/components/data-input/range.js');
const { signal, tags, $ } = Lightview;
tags.Range = Range;

const brightness = signal(70);
const contrast = signal(50);
const saturation = signal(100);

const reactiveDemo = {
    div: {
        style: 'display: flex; flex-direction: column; gap: 1rem; max-width: 28rem',
        children: [
            {
                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',
                    children: [
                        () => `B: ${brightness.value}% | C: ${contrast.value}% | S: ${saturation.value}%`
                    ]
                }
            }
        ]
    }
};

$('#example').content(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

|||||