2c:null 2d:["$","title",null,{"children":"Nonlinear Slider | Mike Bostock | Observable"}] 32:[] 30:{"id":"45b09a32e7d3d4ee","slug":"nonlinear-slider","title":"Nonlinear Slider","thumbnail":"a8b5ef7a9bc0a0cf894c12d907b0d9e5cb39a7ad191d685f674d3aac699e2373","access_level":"public","create_time":"$D2018-01-05T22:51:15.609Z","update_time":"$D2021-02-04T15:17:32.810Z","view_time":null,"first_public_time":"$D2018-01-05T23:29:35.695Z","has_unpublished_edits":null,"fork":false,"stars":18,"starred":false,"owner":{"type":"team","id":"8c2e47252fd4995c","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":"pro_2026"},"version":135,"publish_version":135,"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":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":9,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Nonlinear Slider","cells":[{"id":0,"value":"md`# Nonlinear Slider\n\n

***Update Feb. 2021:*** *Observable now provides a [**Range input**](/@observablehq/input-range) with a configurable transform! This notebook will remain for history, but I recommend upgrading to [Observable Inputs](/@observablehq/inputs).*

\n\nInspired by Matthew Conlen’s [Idyll post](https://mathisonian.github.io/idyll/nonlinear-sliders/).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"transform = {\n const transform = x => x * x; // from nonlinear to linear\n transform.invert = x => Math.sqrt(x); // from linear to nonlinear\n return transform;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"md`As two linked sliders, one nonlinear and the other linear:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"viewof x = {\n const form = html``;\n form.s.value = transform.invert(form.value = form.l.value = 0.5);\n form.s.oninput = () => form.l.value = form.value = transform(form.s.valueAsNumber);\n form.l.oninput = () => form.s.value = transform.invert(form.value = form.l.valueAsNumber);\n return form;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"x","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"md`As a standlone nonlinear slider:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"viewof y = {\n const form = html`