31:T45e,viewof colorpicker = { const div = html`

`; const resultElement = div.lastChild; const sliders = Array.from(div.childNodes).filter(d => d.className === 'sliders'); let colors = [0, 0, 0]; [].slice.call(sliders).forEach(function (slider, index) { noUiSlider.create(slider, { start: 127, connect: [true, false], orientation: "vertical", range: { 'min': 0, 'max': 255 }, }); }); [].slice.call(sliders).forEach(function (slider, index) { // Bind the color changing function to the update event. slider.noUiSlider.on('update', function () { colors[index] = slider.noUiSlider.get(); const color = 'rgb(' + colors.join(',') + ')'; resultElement.style.background = color; resultElement.style.color = color; div.value = Array.from(sliders).map(el => el.noUiSlider.get()); div.dispatchEvent(new CustomEvent('input')); }); }); return div; }32:[] 2f:{"title":"Hello, noUiSlider!","cells":[{"id":0,"value":"md`# Hello, noUiSlider!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":58,"value":"md`[noUiSlider](https://refreshless.com/nouislider/) is an MIT-licensed Javascript range-slider library with touch support. With it, you can create attractive and easy-to-style range sliders with multiple inputs, tooltips, and scales / pips. \n\nTo use it in Observable, you may import (or copy-and-paste) the following cell:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"noUiSlider = {\n if (!document.getElementById('nouislider-css')) {\n const href = await require.resolve(\"nouislider@12.1.0/distribute/nouislider.min.css\");\n document.head.appendChild(html``);\n }\n return await require('nouislider@12.1.0/distribute/nouislider.min.js');\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":119,"value":"md`Sliders from this library integrate fairly well with [Observable's views](https://beta.observablehq.com/@mbostock/introduction-to-views). Here I create a \\`div\\` element with Observable's \\`html\\` tagged template literal and then attach a \\`noUiSlider\\` object to it. Then I update the value of the cell and dispatch an 'input' event when the slider's value changes.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"viewof slider = {\n const slider = html`

`;\n noUiSlider.create(slider, {\n start: [20, 80],\n behaviour: 'drag',\n connect: true,\n tooltips: true,\n range: {\n 'min': 0,\n 'max': 100\n }\n });\n \n // This fires immediately when bound, so we don't need to assign slider.value separately on initialization.\n slider.noUiSlider.on('update', (e) => {\n slider.value = slider.noUiSlider.get();\n slider.dispatchEvent(new CustomEvent('input'));\n })\n \n return slider;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":132,"value":"slider","pinned":true,"hidden":false,"mode":"ojs"},{"id":185,"value":"// Some CSS to auto-hide the tooltips, see https://refreshless.com/nouislider/examples/#section-hiding-tooltips\nhtml``","pinned":false,"hidden":false,"mode":"ojs"},{"id":55,"value":"md`## [Colored Connect Elements](https://refreshless.com/nouislider/examples/#section-colored-connect)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":23,"value":"viewof coloredconnect = {\n const slider = html`

`;\n\n noUiSlider.create(slider, {\n start: [4000, 8000, 12000, 16000],\n connect: [false, true, true, true, true],\n range: {\n 'min': [2000],\n 'max': [20000]\n }\n });\n\n const connect = slider.querySelectorAll('.noUi-connect');\n const classes = ['c-1-color', 'c-2-color', 'c-3-color', 'c-4-color', 'c-5-color'];\n\n for (var i = 0; i < connect.length; i++) {\n connect[i].classList.add(classes[i]);\n }\n\n slider.noUiSlider.on('update', (e) => {\n slider.value = slider.noUiSlider.get();\n slider.dispatchEvent(new CustomEvent('input'));\n })\n\n return slider;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"coloredconnect","pinned":true,"hidden":false,"mode":"ojs"},{"id":49,"value":"coloredconnectStyles = html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}