Published
Edited
Oct 13, 2018
Importers
5 stars
viewof ex_basicSlider = slider({
min: 0,
max: 10,
step: 1,
value: 2
})
viewof ex_simpleExp = slider({
min: 0,
max: 10,
step: 1,
value: 2,
scale: input => Math.pow(10,input),
format: ".0e"
})
viewof ex_exp = slider({
min: 0,
max: 10,
step: 1/9,
value: 6 + 4/9,
format: ".0e",
scale: decToPow
})
decToPow = input => {
const expVal = Math.floor(input);
const multVal = Math.round((input % 1) * 9 + 1);
return multVal * Math.pow(10, expVal);
}
// adapted from @jashkenas/inputs
function slider(config = {}) {
let {value, min = 0, max = 1, step = "any", precision = 2, title, description, format, submit, scale} = config;
if (typeof config == "number") value = config;
if (value == null) value = (max + min) / 2;
precision = Math.pow(10, precision);
const roundVal = input => {
input = isNaN(input.valueAsNumber) ? input : input.valueAsNumber;
return Math.round(input * precision) / precision;
}
let scaleNew;
if (scale == null) {
scaleNew = roundVal;
} else {
scaleNew = input => roundVal(scale(input.valueAsNumber))
}
return input({
type: "range", title, description, submit, format,
attributes: {min, max, step, value},
getValue: scaleNew
});
}
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.
