Published
Edited
Feb 3, 2021
Importers
Insert cell
md`# datalist slider`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
function datalistSlider(datalist = []) {
return form(html`<form>
<input
type=range
name="value"
list="thislist"/>
<datalist id="thislist">
${datalist.map(entry => `<option value=${entry}>`)}
</datalist>
`)
}
Insert cell
viewof datalistinput = datalistSlider(datalist);
Insert cell
md`the value remains as the default [0-100] range.
value: **${datalistinput.value}**`
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more