3f:null 40:["$","title",null,{"children":"Prime Numbers Slider | Fabian Iwand | Observable"}] 46:[] 44:{"id":"bb887ccb077da4f4","slug":"prime-numbers-slider","title":"Prime Numbers Slider","thumbnail":"2490e55cfe50ffbc7a611dd92abf9017c69742589fa3c79d5691394ec6597067","access_level":"public","create_time":"$D2018-11-01T12:30:04.835Z","update_time":"$D2018-11-01T13:57:06.761Z","view_time":null,"first_public_time":"$D2018-11-01T13:51:20.350Z","has_unpublished_edits":null,"fork":false,"stars":21,"starred":false,"owner":{"type":"team","id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":"starter_2024","bio":"Web dev and tinkerer.","following":false},"version":202,"publish_version":202,"role":null,"authored":false,"authors":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null,"bio":"Web dev and tinkerer.","following":false}],"members":[{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null,"role":"editor"}],"comments":[{"id":"9d4c9fd8bf9a93d0","reply_to_id":null,"content":"This is fantastic! Thanks for sharing :)","create_time":"$D2020-11-30T13:26:45.882Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":{"id":"6d9c7f601029e6bf","slug":"widgets","title":"Widgets and helpers","owner":{"id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand"}},"type":"notebook","body":{"titling":"auto","title":"Prime Numbers Slider","cells":[{"id":0,"value":"md`\n# Prime Numbers Slider\n\nThe slider function in Jeremy Ashkenas's [Inputs notebook](https://beta.observablehq.com/@jashkenas/inputs) has an undocumented feature: It lets you pass a value callback via getValue.\n\nTo create a slider that only stops at certain numbers we first create an array containing all our numbers, then let the slider step through the array's indices while our callback returns the value at the current index.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"viewof prime = {\n const min = 0, max = 1000, value = 100;\n const primes = getPrimes(min, max);\n let i = 0;\n while(primes[i+1] <= value) i++;\n \n return slider({\n value: this ? this.input.value : i, step: 1, max: primes.length - 1,\n getValue: n => primes[n.value]\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"md`\nWe can also cut out the \"middle man\" and modify the slider function to drop any configuration options that we cannot properly support (like step and precision).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"function primesSlider(config = {}) {\n let {value, min = 0, max = 1000, title, description, display, submit} = config;\n min = Math.max(min, 0); max = Math.max(max, 0);\n if (typeof config == 'number') value = config;\n if (value == null) value = (max + min) / 2;\n value = Math.round(value);\n\n const primes = getPrimes(min, max);\n let i = 0;\n while(primes[i+1] <= value) i++;\n \n return input({\n type: 'range', title, description, submit, display,\n attributes: {min: 0, max: primes.length - 1, step: 1, value: i},\n getValue: n => primes[n.value]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"primesSlider({min: 0, max: 1e6, value: this ? this.value : .5e6})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"md`\n---\n## Bonus: Custom Value Display\n\nslider, date and color let you pass a display callback to override the output value.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":130,"value":"viewof words = {\n const phrases = [\n 'Too far left, try moving right.',\n 'Getting closer ...',\n 'Almost there ...',\n 'PERFECT!',\n 'You almost had it.',\n '⬅ Hey, that way!',\n 'You lost or something?',\n ];\n \n return slider({\n value: -3, min: -3, max: 3, step: 1,\n display: v => phrases[v + 3]\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"words","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":156,"value":"viewof rgb = {\n return color({\n value: '#ffaa33',\n display: v => {\n const [r,g,b] = v.slice(1).match(/../g).map(v => parseInt(v, 16));\n return `Red: ${r}, Green: ${g}, Blue: ${b}`;\n }\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"rgb","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"function getPrimes(min, max) {\n const primes = [];\n const len = max + 1;\n const sieve = new Uint32Array(len);\n for(let i = 2; i < len; i++) if(!sieve[i]) for(let j = i + i; j <= max; j += i) sieve[j] = 1;\n for(let i = 2; i < len; i++) if(i >= min && !sieve[i]) primes.push(i);\n return primes;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"import {slider, color, input} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 45:"$44:body"