Public
Edited
Apr 9, 2023
Importers
Insert cell
Insert cell
Insert cell
{
const sliderContainer = d3.create('div')
.attr('class', 'slider-container');
const myRangeSlider = sliderContainer.append('div');
myRangeSlider.call(
slider()
.id('myRange')
.labelText('My range value: ')
.min(1)
.max(100)
.step(1)
.value(50)
.on('change', (value) => {
console.log(`You selected: ${value}`);
})
);
return sliderContainer.node();
}
Insert cell
function slider() {
let id;
let labelText;
let min;
let max;
let step;
let value;
const listeners = d3.dispatch('change');
const slider = (selection) => {
selection
.style('font-family', 'sans-serif');
selection
.selectAll('label')
.data([null])
.join('label')
.attr('for', id)
.text(labelText);
selection
.selectAll('input')
.data([null])
.join('input')
.attr('type', 'range')
.attr('id', id)
.attr('min', min)
.attr('max', max)
.attr('value', value)
.on('change', (event) => {
selection
.selectAll('output')
.data([null])
.join('output')
.attr('id', id)
.text(event.target.value);
listeners.call('change', null, event.target.value);
});

selection
.selectAll('output')
.data([null])
.join('output')
.attr('id', id)
.text(value);
};

slider.id = function (_) {
return arguments.length ? ((id = _), slider) : id;
}

slider.labelText = function (_) {
return arguments.length ? ((labelText = _), slider) : labelText;
}

slider.min = function (_) {
return arguments.length ? ((min = +_), slider) : min;
}

slider.max = function (_) {
return arguments.length ? ((max = +_), slider) : max;
}

slider.step = function (_) {
return arguments.length ? ((step = +_), slider) : step;
}

slider.value = function (_) {
return arguments.length ? ((value = +_), slider) : value;
}

slider.on = function () {
let value = listeners.on.apply(listeners, arguments);
return value === listeners ? slider : value;
};

return slider;
}
Insert cell
slider()
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