Range Slider

/** A single value - a slider over a range input, which keeps its min, max and value. */
export function mount(root) {
    const shown = $(root).find('#demo-volume-value');

    const volume = E.rangeSlider($(root).find('#demo-volume'), {
        onInput: (value) => shown.text(value)
    });

    return () => volume.destroy();
}

/** Two thumbs - a price range, kept at least £50 apart. */
export function mount(root) {
    const shown = $(root).find('#demo-price-value');

    const price = E.rangeSlider($(root).find('#demo-price'), {
        range: true,
        min: 0,
        max: 1000,
        step: 10,
        value: [100, 600],
        minDistance: 50,
        name: 'price',
        ariaLabel: 'Price',
        labels: (v) => '£' + v,
        tooltip: 'always',
        onInput: ([low, high]) => shown.text('£' + low + ' and £' + high)
    });

    return () => price.destroy();
}

/** Ticks and marks - a tick at every step, and labelled marks to jump to. */
export function mount(root) {
    const rating = E.rangeSlider($(root).find('#demo-rating'), {
        ticks: true,
        tickLabels: true,
        labels: (v) => v + '★'
    });

    const temp = E.rangeSlider($(root).find('#demo-temp'), {
        ticks: 10,
        labels: (v) => v + '°C',
        marks: [
            {value: 30, label: 'Delicates'},
            {value: 40, label: 'Everyday'},
            {value: 60, label: 'Towels'},
            {value: 90, label: 'Boil'}
        ]
    });

    return () => {
        rating.destroy();
        temp.destroy();
    };
}

/** Vertical and right-to-left - a three-band equaliser, and a slider in an Arabic block. */
export function mount(root) {
    const bands = [['#demo-eq-1', 'Bass', 3], ['#demo-eq-2', 'Middle', -2], ['#demo-eq-3', 'Treble', 6]];
    const sliders = bands.map(([selector, name, value]) => E.rangeSlider($(root).find(selector), {
        orientation: 'vertical',
        min: -12,
        max: 12,
        value,
        ariaLabel: name,
        labels: (v) => (v > 0 ? '+' : '') + v + ' dB'
    }));

    // The block is dir="rtl", so the minimum is on the right
    sliders.push(E.rangeSlider($(root).find('#demo-rtl'), {ticks: true}));

    return () => sliders.forEach(s => s.destroy());
}

/** In a form - the sliders' hidden range inputs submit with it, and Reset puts them back. */
export function mount(root) {
    const form = $(root).find('#demo-form');
    const output = $(root).find('#demo-form-output');

    const guests = E.rangeSlider($(root).find('#demo-form-guests'), {ticks: true});
    const budget = E.rangeSlider($(root).find('#demo-form-budget'), {
        range: true,
        min: 0,
        max: 2000,
        step: 50,
        value: [200, 800],
        names: ['budget_min', 'budget_max'],
        ariaLabels: ['Budget from', 'Budget to'],
        labels: (v) => '£' + v
    });

    // Show what the form would send instead of sending it
    const show = (e) => {
        e.preventDefault();
        const lines = [];
        for (const [key, value] of new FormData(e.currentTarget).entries()) lines.push(key + ' = ' + value);
        output.text(lines.join('\n'));
    };
    form.on('submit', show);

    return () => {
        form.off('submit', show);
        guests.destroy();
        budget.destroy();
    };
}

/** In an F.create blueprint - slider fields, one of them a [low, high] pair. */
export function mount(root) {
    const output = $(root).find('#demo-blueprint-output');

    const form = F.create({
        brightness: {
            type: 'slider', label: 'Brightness', min: 0, max: 100, default: 70,
            formConfig: {labels: (v) => v + '%'}
        },
        hours: {
            type: 'slider', label: 'Opening hours', min: 0, max: 24, default: [9, 17],
            formConfig: {
                range: true, minDistance: 1, ticks: 6, tickLabels: true,
                labels: (v) => String(v).padStart(2, '0') + ':00'
            }
        }
    }, {}, {
        submitText: 'Save',
        onSubmit: (data) => output.text(JSON.stringify(data))
    });
    const target = $(root).find('#demo-blueprint');
    form.renderTo(target.get(0));

    return () => {
        form.destroy();
        target.empty();
    };
}

/** Events - beforechange refuses anything above 80; change is logged from the DOM event. */
export function mount(root) {
    const list = $(root).find('#demo-log');
    const log = (message) => {
        list.find('.sx-rs-empty').remove();
        list.prepend($('<li>').text(D().format('HH:mm:ss') + ' - ' + message));
        list.find('li').filter((i) => i >= 8).remove();
    };

    const capped = E.rangeSlider($(root).find('#demo-capped'), {
        labels: (v) => v + ' / 100',
        onBeforeChange: (next) => next <= 80
    });

    // Every event also bubbles as dm:range-slider:<event>, with {instance, args} in detail
    const onChange = (e) => log('change: ' + JSON.stringify(e.detail.args[0]));
    $(root).on('dm:range-slider:change', onChange);

    const disable = $(root).find('#demo-capped-disable');
    const set = $(root).find('#demo-capped-set');
    const flip = () => {
        if (capped.isDisabled()) capped.enable();
        else capped.disable();
        disable.text(capped.isDisabled() ? 'Enable' : 'Disable');
    };
    const setTo25 = () => capped.setValue(25);
    disable.on('click', flip);
    set.on('click', setTo25);

    return () => {
        $(root).off('dm:range-slider:change', onChange);
        disable.off('click', flip);
        set.off('click', setTo25);
        capped.destroy();
    };
}