2c:null 2d:["$","title",null,{"children":"Double Range Input Slider | Kasi Viswanath | Observable"}] 32:T446,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\`: Optional. Available options: ${Object.entries({ min: 'Minimum value, number. Defaults to 0.', max: 'Maximum value, number. Defaults to 100.', 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. Optional, defaults to [min, max].', 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 the theme.', }).map(([k,v]) => ` - \`${k}:\` ${v}\n`)} ` })33:T48a,doc_rangeSlider = signature(rangeSlider, { description: md` **Deprecated**. Use [\`interval()\`](#doc_interval) instead. Widget that imitates the appearance and API of [\`slider()\`](https://observablehq.com/@jashkenas/inputs#slider). Arguments: - \`options:\` Optional. Available options: ${Object.entries({ title: 'Title above widget, string. Defaults to `null`.', description: 'Description below widget, string. Defaults to `null`.', submit: 'Display a submit button to apply changes, boolean. Defaults to false.', getValue: 'Value callback, Function. Defaults to n => n.value.map(roundToPrecision).', color: 'CSS color for range. Defaults to the theme.', separator: 'Value separator. Defaults to " … ".', precision: 'Number of decimals as Number. Defaults to 3.', format: 'Display format as [d3-format](https://github.com/d3/d3-format) string or Function. Defaults to v => v.', display: 'Display formatter as Function. Defaults to v => v.map(format).join(separator)', }).map(([k,v]) => ` - \`${k}:\` ${v}\n`)}` })34:T678,function interval(range = [], options = {}) { const [min = 0, max = 1] = range; const { step = .001, label = null, value = [min, max], format = ([start, end]) => `${start} … ${end}`, color, width, theme, } = options; const __ns__ = DOM.uid('scope').id; 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: 360px; } } #${__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, color, width, theme}); const $output = html``; const $view = html`

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

${label}`}

${$range}

${$output}

${html`