2a:null 2b:["$","title",null,{"children":"Prime Numbers Slider | Fons van der Plas (old) | Observable"}] 31:[] 2e:{"id":"ea0c4eae94bc9204","slug":"prime-numbers-slider","title":"Prime Numbers Slider","thumbnail":"fc697e64405c51834fe3a1e5b68d30263f533ac6a996de98f1bf72b233cab365","access_level":"public","create_time":"$D2019-06-30T21:31:29.767Z","update_time":"$D2020-06-15T23:19:11.365Z","view_time":null,"first_public_time":"$D2019-06-30T21:36:00.675Z","fork":{"id":"bb887ccb077da4f4","slug":"prime-numbers-slider","title":"Prime Numbers Slider","owner":{"id":"898d35f8860c7f03","login":"mootari","name":"Fabian Iwand"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b69f7fc06db3bdd0","login":"olivier_plas","name":"Fons van der Plas (old)","avatar_url":"https://avatars-next.observableusercontent.com/fc10801f5fbe921128a3cc392873b717ae3d0139b87114acc4230f7303ff142e","tier":"starter_2024"},"version":212,"publish_version":212,"role":null,"authored":false,"authors":[{"type":"individual","id":"6aca374b28a4bb6d","login":"olivier_plas_123456","name":"","avatar_url":null,"tier":null}],"members":[{"type":"individual","id":"b6cde2fab5c6f5fa","login":"fonsp","name":"Fons van der Plas","avatar_url":"https://avatars-next.observableusercontent.com/edacdd0fa6b6c876851449177905d972d41fe02bd327094b210ded28d855f3c8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"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"},{"id":203,"value":"viewof z={return allowedSlider(0,100,[3,4,50])}","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"allowedSlider = function(min, max, allowed){\n const value = min;\n let i = 0;\n while(allowed[i+1] <= value) i++;\n \n return slider({\n value: this ? this.input.value : i, step: 1, max: allowed.length - 1,\n getValue: n => allowed[n.value]\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":63,"value":"primesSlider({min: 0, max: 1e6, value: this ? this.value : .5e6})","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":149,"value":"words","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":194,"value":"rgb","pinned":false,"hidden":false,"mode":"ojs"},{"id":61,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":20,"value":"import {slider, color, input} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}} 2f:"$2e:body"