2d:null 2e:["$","title",null,{"children":"Dashboard | Berkeley Institute for Young Americans | Observable"}] 33:T4b2,theme_NoUiSlider = ` /* Options */ :scope { color: #3b99fc; width: 240px; } :scope { box-sizing: border-box; display: inline-block; vertical-align: middle; } :scope .range-track { box-sizing: border-box; margin: 10px 17px; position: relative; background: #FAFAFA; border-radius: 4px; border: 1px solid #D3D3D3; box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB; height: 18px; } :scope .range-select { box-sizing: border-box; position: absolute; background: currentColor; left: var(--range-min); width: calc(var(--range-max) - var(--range-min)); height: 100%; cursor: ew-resize; } :scope .thumb { box-sizing: border-box; position: absolute; width: 34px; height: 28px; top: -6px; border: 1px solid #D9D9D9; border-radius: 3px; background: #FFF; cursor: default; box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB; } :scope .thumb:before, :scope .thumb:after { content: ""; display: block; position: absolute; height: 14px; width: 1px; background: #E8E7E6; left: 14px; top: 6px; } :scope .thumb:after { left: 17px; } :scope .thumb-min { left: -17px; } :scope .thumb-max { right: -17px; } `34:T7a2,/* Source: https://observablehq.com/@mootari/range-slider */ /* Modified labelled output on slider to supress output; specifically, the following line: const $output = html` `; */ /* Modified width setting; specifically, commnted out the following line: width: 400px; */ function interval1(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: 400px; /* adjust element 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, color, width, theme}); const $output = html` `; const $view = html`

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

${label}`}

${$range}

${$output}

${html`