I love building things that make people's life easier
Published
Edited
Jun 6, 2022
Importers
Double Range Slider
function range_slider({ min, max, step = 1, width_ = 100, height_ = 100 }) {
const target = html`<svg id="target" viewBox="0 0 ${width} ${height}">
</svg>`;
const margin = { left: 0, right: 10, top: 100, bottom: 10 },
iwidth = width_ - margin.left - margin.right,
iheight = height_ - margin.top - margin.bottom;
const x = d3.scaleLinear().domain([0, max]).range([0, iwidth]).nice();
let svg = d3
.select(target)
.append("svg")
.attr("width", 500)
.attr("height", height);
// Add the path using this helper function
svg
.append("rect")
.attr("x", 10)
.attr("y", 10)
.attr("width", width_ - 10)
.attr("height", height_ / 4)
.attr("stroke", "black")
.attr("fill", "#69a3b2");
svg
.append("g")
.attr("class", "x--axis")
.attr("transform", `translate(10,${height_})`)
.call(d3.axisBottom(x));
svg
.append("rect")
.attr("id", "selection")
.attr("x", 5)
.attr("y", 5)
.attr("width", 20)
.attr("height", 20)
.attr("stroke", "black")
.attr("fill", "white")
.on("mousedown", function (event) {
console.log("hi");
this.addEventListener("mousemove", move);
});
// .on("mouseup", (event) => {
// .removeEventListener("mousemove", move);
// console.log("removed");
// });
function move(event) {
console.log("moved");
d3.select("#selection").attr("x", event.pageX);
}
return svg.node();
}
range_slider({ min: 10, max: 100 })
height = 100
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.
