2b:null 2c:["$","title",null,{"children":"Range Input / Observable Inputs | Observable | Observable"}] 31:[] 2f:{"id":"786da182ec1affaf","slug":"input-range","title":"Range Input / Observable Inputs","thumbnail":"af1d6c78c0bb5e41af5bb7625b98db2b361b8ae38ea59c9bc2323e696097a458","access_level":"public","create_time":"$D2021-02-02T20:57:52.556Z","update_time":"$D2021-10-15T19:47:55.472Z","view_time":null,"first_public_time":"$D2021-02-04T15:13:38.670Z","fork":false,"stars":17,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024"},"version":267,"publish_version":267,"role":null,"authored":false,"authors":[{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}],"members":[{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null,"role":"editor"},{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"},{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","role":"viewer"}],"comments":[{"id":"2c429a40dabcbacb","reply_to_id":null,"content":"When the number is empty, its value isNaN. So one needs to test for that, like in \\`isNaN(gain) ? 0 : gain\\`. Wish: option to set a default for when isNaN.\n\nWhen typed number falls outside of range (e.g. when using Range to select item from array), result of array reference is \\`undefined\\`. Wish: option to ‘squeeze’ value to always be in range.","create_time":"$D2021-02-08T15:34:32.593Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"3c5ecb707ecd20a7","login":"martien","name":"Martien van Steenbergen","avatar_url":"https://avatars-next.observableusercontent.com/40dc8e4f86d0cf89184b173b4d1d88336e5728c175479f33261ced3496adb3c2","tier":null}},{"id":"fd6582d07dd1ae4f","reply_to_id":"2c429a40dabcbacb","content":"To always have correct values—automatically when ‘ranging’ an array—I now have:\n\nsqueeze = (x, r) => {\n const range = Array.isArray(r) ? [0, r.length - 1] : r\n return isNaN(x) ? range[0] : x < range[0] ? range[0] : x > range[1] ? range[1] : x\n}","create_time":"$D2021-02-09T13:00:57.721Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"3c5ecb707ecd20a7","login":"martien","name":"Martien van Steenbergen","avatar_url":"https://avatars-next.observableusercontent.com/40dc8e4f86d0cf89184b173b4d1d88336e5728c175479f33261ced3496adb3c2","tier":null}},{"id":"e875b5a61d313cf8","reply_to_id":null,"content":"What about Range of dates (with custom steps, i.e. 6h or 2days or ...)?\nI guess with current construct there would be quite a lot of transformation and formatting if at any possible.\nOr does it \"deserve\" its own input?\nAny suggestions / pointers?","create_time":"$D2021-02-22T11:23:10.413Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"c2f17e4031105178","login":"espinielli","name":"Enrico Spinielli","avatar_url":"https://avatars-next.observableusercontent.com/2bf5259d0c49a57cec6acc725062bdc41374a518de8772a2a051315f6be64567","tier":null}},{"id":"915a0a3b6a8d375a","reply_to_id":null,"content":"Weirdly enough, this fails:\n\nviewof x = Range([-0.5857864376269049, 2])\n\nSymptom: variable x never reaches -0.586, although the value displayed in the number input element does\n\nThis also fails:\n\nviewof x = Range([-0.5857864376269049, 2], {step:0.0001})\n\nSymptom: variable x is never updated, although the number input element does.","create_time":"$D2021-03-13T22:25:37.398Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null}},{"id":"7106db89d6bda380","reply_to_id":"915a0a3b6a8d375a","content":"This appears to be a precision problem with the behavior of native inputs. I would suggest not relying on such high precision for user input. For example, an extent of [-0.586, 2] will be fine. You can verify this, given an input:\n\n\n\nThe input.valueAsNumber is -0.585786437626905 (note the rounding), and after calling input.checkValidity(), input.validity.rangeUnderflow is true. Changing the minimum to -0.585786437626905 fixes this problem.\n\nThe other problem here is that the default number format (number.toLocaleString) will only give you three decimal places, so to be compatible with Observable’s Range input, you need the number input to be valid, too. So I recommend using -0.586 as the minimum, or if you really want a high precision input, pass {format: x => x} to force the number to display all the digits.","create_time":"$D2021-03-13T22:48:41.753Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}},{"id":"bf6442d62b31faf1","reply_to_id":"2c429a40dabcbacb","content":"Release 0.7.13 added input validation to Range, so invalid values are no longer visible.\n\nhttps://github.com/observablehq/inputs/releases/tag/v0.7.13","create_time":"$D2021-03-13T22:50:15.497Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}},{"id":"3bd06f4b926d365a","reply_to_id":"e875b5a61d313cf8","content":"I think that’s outside the scope of the input, because you’re intended to be able to type into the number input to set the value. Though perhaps a date range could let you type a date in… Feel free to upvote this issue: https://github.com/observablehq/inputs/issues/38","create_time":"$D2021-03-13T23:02:08.145Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}},{"id":"727db2df3a14a210","reply_to_id":"2c429a40dabcbacb","content":"Great! Thank you.","create_time":"$D2021-03-14T08:51:10.552Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"3c5ecb707ecd20a7","login":"martien","name":"Martien van Steenbergen","avatar_url":"https://avatars-next.observableusercontent.com/40dc8e4f86d0cf89184b173b4d1d88336e5728c175479f33261ced3496adb3c2","tier":null}},{"id":"4712485c4b525b43","reply_to_id":"915a0a3b6a8d375a","content":"Thanks, Mike. I had already figured out how to avoid the problem. It's just that that weird number came out as a calculation -- 2 * (Math.cos(Math.PI / 4) - 1) and I thought it was worth mentioning. From here on, limits are best written as literals!","create_time":"$D2021-03-14T17:22:26.101Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"591dcad3c6121253","login":"esperanc","name":"Claudio Esperança","avatar_url":"https://avatars-next.observableusercontent.com/91db65fe4bf8e490e5ff1a548612f36ccc04fa7781189e7e4dc7ba6633a66e52","tier":null}},{"id":"8b5935da5b997ac9","reply_to_id":"915a0a3b6a8d375a","content":"This behavior has been substantially improved in 0.7.18. Hope this helps!\n\nhttps://github.com/observablehq/inputs/releases/tag/v0.7.18","create_time":"$D2021-04-07T18:20:24.814Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}},{"id":"cabeae6c926c908b","reply_to_id":null,"content":"Can we change the style (color, width, height, etc.) of the slider?","create_time":"$D2021-05-14T14:22:48.117Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"917c8eb3367f9e91","login":"lochiwei","name":"lochiwei","avatar_url":"https://avatars-next.observableusercontent.com/ab27db86392e58dc187a21fef0d6cb4c5387914b82b7134a9da0ede3cc77ad7a","tier":null}},{"id":"8270f4255d81c0da","reply_to_id":"cabeae6c926c908b","content":"You can style it with external CSS, but this is not recommended. Observable Inputs are intended to provide a well-designed, consistent appearance by default. For more customization, see https://observablehq.com/@bartok32/diy-inputs","create_time":"$D2021-05-14T15:10:14.928Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}},{"id":"b453abb193a4863d","reply_to_id":null,"content":"When the \"step\" is provided at the same time as a \"transform\", the Input does not update\nI noticed that in this notebook https://observablehq.com/@mbostock/sine-cosine","create_time":"$D2021-09-24T12:18:48.872Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"9dbe9421a5362c23","login":"za","name":"Za","avatar_url":"https://avatars-next.observableusercontent.com/2ea62b795b6b6fde3e46396a2aa7df43f9a444de946404d22e0815a83ad710fe","tier":null}},{"id":"9f5969500d640713","reply_to_id":"b453abb193a4863d","content":"I’m working on it. https://github.com/observablehq/inputs/issues/176","create_time":"$D2021-09-24T12:53:59.872Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}},{"id":"c79ec2adc4d86518","reply_to_id":"b453abb193a4863d","content":"Seems like transform is not working?","create_time":"$D2021-11-30T21:05:15.646Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"88a33f32468b0503","login":"plmrry","name":"Paul Murray","avatar_url":"https://avatars-next.observableusercontent.com/e55c33ea9568426a80f30a4e3ca4f71e21571d01804bee4b863c3063bd4a62e1","tier":null}},{"id":"be64cc6ee5887e4c","reply_to_id":"b453abb193a4863d","content":"It appears to be working for me. When the thumb is in the middle of the range, the value is ~10 (rather than ~50).","create_time":"$D2021-11-30T21:51:56.511Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}},{"id":"b7fec2f1bc65c30c","reply_to_id":"b453abb193a4863d","content":"Ah I see, I misunderstood how transform works, whoops","create_time":"$D2021-12-01T12:40:15.957Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"88a33f32468b0503","login":"plmrry","name":"Paul Murray","avatar_url":"https://avatars-next.observableusercontent.com/e55c33ea9568426a80f30a4e3ca4f71e21571d01804bee4b863c3063bd4a62e1","tier":null}},{"id":"f040b5fe09762c95","reply_to_id":null,"content":"How can I change disabled option dynamically?","create_time":"$D2022-03-10T03:02:50.650Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"99e57c8b5dcd5ca6","login":"sugi2000","name":"SUGIMOTO Tatsuo","avatar_url":"https://avatars-next.observableusercontent.com/aa2e590c6e4574dde26ce160f882c7074c3f190de1894c0dd147878beed52f39","tier":null}},{"id":"48cb897842fde715","reply_to_id":"f040b5fe09762c95","content":"Set the attribute directly on the two input elements of the form that is returned. For example with D3:\n> d3.select(viewof d).selectAll(\"input\").attr(\"disabled\", \"disabled\") // disable\n> d3.select(viewof d).selectAll(\"input\").attr(\"disabled\", null) // enable","create_time":"$D2022-03-10T08:09:04.005Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"45a379fcfcb14253","login":"fil","name":"Fil","avatar_url":"https://avatars-next.observableusercontent.com/d5b1777907117a2bdf2a07eb98600d7a9beb21639fde42b9753e95c88c7731a6","tier":null}},{"id":"39c800cb41dd1807","reply_to_id":"f040b5fe09762c95","content":"Thanks, I got it.","create_time":"$D2022-03-10T08:50:49.041Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"99e57c8b5dcd5ca6","login":"sugi2000","name":"SUGIMOTO Tatsuo","avatar_url":"https://avatars-next.observableusercontent.com/aa2e590c6e4574dde26ce160f882c7074c3f190de1894c0dd147878beed52f39","tier":null}},{"id":"8662143fab34d59d","reply_to_id":"2c429a40dabcbacb","content":"Setting value:NaN defaults to showing the placeholder. But gain still has a value.\nIs there a clearer way to show the placeholder on loading?","create_time":"$D2022-05-28T19:30:07.537Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"71df97e2192b6fce","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":18,"collection":{"id":"c100282feee59b2a","slug":"inputs","title":"Observable Inputs","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"Range Input / Observable Inputs","cells":[{"id":0,"value":"

Range Input / Observable Inputs

Observable Inputs › Range · API

\n\n# Input: Range\n\nA Range input specifies a number between the given *min* and *max* (inclusive). This number can be adjusted roughly by sliding, or precisely by typing. A range input is also known as a slider.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":149,"value":"md`By default, a Range chooses a floating point number between 0 and 1 with full precision, which is often more precision than desired.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"viewof x = Inputs.range()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"x","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":129,"value":"md`The current value of *x* is ${x.toLocaleString(\"en\")}.`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":77,"value":"md`The *step* option is strongly encouraged to set the desired precision (the interval between adjacent values). For integers, use *step* = 1. The up and down buttons in the number input will only work if a *step* is specified. To change the extent, pass [*min*, *max*] as the first argument.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":81,"value":"viewof y = Inputs.range([0, 255], {step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":125,"value":"md`The *min*, *max* and *step* options affect only the slider behavior, the number input’s buttons, and whether the browser shows a warning if a typed number is invalid; they do not constrain the typed number.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":86,"value":"md`The *value* option sets the initial value, which defaults to the middle of the range: (*min* + *max*) / 2.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":88,"value":"viewof z = Inputs.range([0, 255], {step: 1, value: 0})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":132,"value":"z","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":75,"value":"md`To describe the meaning of the input, supply a *label*. A *placeholder* string may also be specified; it will only be visible when the number input is empty.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":33,"value":"viewof gain = Inputs.range([0, 11], {label: \"Gain\", step: 0.1, placeholder: \"0–11\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":45,"value":"gain","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":109,"value":"md`For more control over typography, the *label* may be an HTML element.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":115,"value":"viewof n = Inputs.range([1, 10], {label: html`Top n`, step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":182,"value":"md`You can even use a ${tex`\\TeX`} label, if you’re into that sort of thing.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":110,"value":"viewof psir = Inputs.range([0, 1], {label: tex`\\psi(\\textbf{r})`})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":244,"value":"For an unbounded range, or simply to suppress the range input, you can use Inputs.number instead of Inputs.range. If you don’t specify an initial value, it defaults to undefined which causes referencing cells to wait for valid input.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":235,"value":"viewof m = Inputs.number([0, Infinity], {step: 1, label: \"Favorite integer\", placeholder: \"\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":242,"value":"m","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"md`If differences in the numeric range are not uniformly interesting — for instance, when looking at log-distributed values — pass a *transform* function to produce a [nonlinear slider](https://mathisonian.github.io/idyll/nonlinear-sliders/). The built-in Math.log and Math.sqrt transform functions are recommended. If you supply a custom function, you should also provide an *invert* function that implements the inverse transform. (Otherwise, the Range will use [Newton’s method](https://en.wikipedia.org/wiki/Newton%27s_method) which may be inaccurate.)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"Inputs.range([1, 100], {transform: Math.log})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"Inputs.range([0, 1], {transform: Math.sqrt})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":90,"value":"md`The *format* option allows you to specify a function that is called to format the displayed number. Note that the returned string must be a [valid floating-point number](https://html.spec.whatwg.org/multipage/common-microsyntaxes.html#valid-floating-point-number) according to the HTML specification; no commas allowed!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":92,"value":"viewof f = Inputs.range([0, 1], {format: x => x.toFixed(2)})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":95,"value":"f","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":73,"value":"md`To prevent a Range’s value from being changed, use the *disabled* option.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":47,"value":"viewof d = Inputs.range([0, 1], {disabled: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":58,"value":"d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"