31:T41d,doc_interval = signature(interval, { description: md` Widget that imitates the appearance and API of [\`range()\`](https://observablehq.com/@observablehq/input-range). Arguments: - \`range\`: Array of \`[min, max]\`. Defaults to \`[0, 1]\`. - \`options\`: Available options: ${Object.entries({ step: 'Range step, number. Defaults to any.', label: 'Input label. Defaults to `null`.', format: 'Callback that receives the current value and returns an output string. Defaults to ```([start, end]) => `${start} … ${end}` ```.', value: 'Lower and upper range bounds, array of number. Defaults to [min, max].', collide: 'Wether to prevent handles from being dragged past each other. Defaults to true.', theme: 'Widget CSS, string. Defaults to [theme_Flat](#doc_theme_Flat).', color: 'Range color as CSS \`color\` value. Defaults to the theme.', width: 'Range width, either number of pixels or a CSS \`width\` string. Defaults to `360`.', }).map(([k,v]) => ` - \`${k}:\` ${v}\n`)} ` })32:T6a7,function interval(range = [], options = {}) { const [min = 0, max = 1] = range; const { step = .001, label = null, value = [min, max], collide = true, format = ([start, end]) => `${start} … ${end}`, color, width = 360, theme, __ns__ = randomScope(), } = options; const css = ` #${__ns__} { font: 13px/1.2 var(--sans-serif); display: flex; align-items: baseline; flex-wrap: wrap; max-width: 100%; width: auto; } @media only screen and (min-width: 30em) { #${__ns__} { flex-wrap: nowrap; width: ${cssLength(width)}; } } #${__ns__} .label { width: 120px; padding: 5px 0 4px 0; margin-right: 6.5px; flex-shrink: 0; } #${__ns__} .form { display: flex; width: 100%; } #${__ns__} .range { flex-shrink: 1; width: 100%; } #${__ns__} .range-slider { width: 100%; } `; const $range = rangeInput({min, max, value: [value[0], value[1]], step, collide, color, width: "100%", theme}); const $output = html``; const $view = html`

${label == null ? '' : html`

${label}`}

${$range}

${$output}

${html`