javascript-d3How can I create a slider with D3.js and JavaScript?

Creating a slider with D3.js and JavaScript is fairly straightforward. The following example code creates a basic slider using D3.js and JavaScript:

// Create the SVG
var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 500);

// Create the slider
var slider = svg.append("g")
  .attr("class", "slider")
  .attr("transform", "translate(" + 100 + "," + 100 + ")");

// Create the scale
var x = d3.scaleLinear()
  .domain([0, 10])
  .range([0, 300])
  .clamp(true);

// Create the axis
var axis = d3.axisBottom(x)
  .ticks(5);

// Create the slider handle
var handle = slider.insert("circle", ".track-overlay")
  .attr("class", "handle")
  .attr("r", 9);

// Create the slider track
slider.append("line")
  .attr("class", "track")
  .attr("x1", x.range()[0])
  .attr("x2", x.range()[1])
  .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
  .attr("class", "track-inset")
  .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
  .attr("class", "track-overlay")
  .call(d3.drag()
    .on("start.interrupt", function() { slider.interrupt(); })
    .on("start drag", function() { update(x.invert(d3.event.x)); }));

// Create the slider ticks
slider.insert("g", ".track-overlay")
  .attr("class", "ticks")
  .attr("transform", "translate(0," + 18 + ")")
  .selectAll("text")
  .data(x.ticks(5))
  .enter()
  .append("text")
  .attr("x", x)
  .attr("y", 10)
  .attr("text-anchor", "middle")
  .text(function(d) { return d; });

// Update the slider
function update(h) {
  handle.attr("cx", x(h));
}

This code will create a basic slider with 5 tick marks and a draggable handle. The scale is set to range from 0 to 10.

Code explanation

• var svg = d3.select("body"): Selects the body element and stores it in the svg variable.
• .append("svg"): Appends an SVG element to the body element.
• .attr("width", 500): Sets the width of the SVG element to 500 pixels.
• .attr("height", 500): Sets the height of the SVG element to 500 pixels.
• var slider = svg.append("g"): Appends a group element to the SVG element and stores it in the slider variable.
• .attr("class", "slider"): Sets the class of the group element to "slider".
• .attr("transform", "translate(" + 100 + "," + 100 + ")"): Translates the group element by 100 pixels in both the x and y directions.
• var x = d3.scaleLinear(): Creates a linear scale and stores it in the x variable.
• .domain([0, 10]): Sets the domain of the scale to 0 to 10.
• .range([0, 300]): Sets the range of the scale to 0 to 300.
• .clamp(true): Clamps the scale so that values outside the domain are not allowed.
• var axis = d3.axisBottom(x): Creates a bottom axis and stores it in the axis variable.
• .ticks(5): Sets the number of ticks on the axis to 5.
• var handle = slider.insert("circle", ".track-overlay"): Inserts a circle element into the group element and stores it in the handle variable.
• .attr("class", "handle"): Sets the class of the circle element to "handle".
• .attr("r", 9): Sets the radius of the circle element to 9 pixels.
• slider.append("line"): Appends a line element to the group element.
• .attr("class", "track"): Sets the class of the line element to "track".
• .attr("x1", x.range()[0]): Sets the x1 attribute of the line element to the start of the range of the scale.
• .attr("x2", x.range()[1]): Sets the x2 attribute of the line element to the end of the range of the scale.
• .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); }): Clones the line element and appends it to the group element.
• .attr("class", "track-inset"): Sets the class of the cloned line element to "track-inset".
• .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); }): Clones the line element and appends it to the group element.
• .attr("class", "track-overlay"): Sets the class of the cloned line element to "track-overlay".
• .call(d3.drag(): Applies the drag behavior to the cloned line element.
• .on("start.interrupt", function() { slider.interrupt(); }): Interrupts the drag behavior when it starts.
• .on("start drag", function() { update(x.invert(d3.event.x)); }): Updates the slider when the drag behavior starts and/or is dragged.
• slider.insert("g", ".track-overlay"): Inserts a group element into the group element.
• .attr("class", "ticks"): Sets the class of the group element to "ticks".
• .attr("transform", "translate(0," + 18 + ")"): Translates the group element by 18 pixels in the y direction.
• .selectAll("text"): Selects all text elements in the group element.
• .data(x.ticks(5)): Sets the data of the text elements to the ticks of the scale.
• .enter(): Enters the text elements into the group element.
• .append("text"): Appends a text element to the group element.
• .attr("x", x): Sets the x attribute of the text element to the position of the tick on the scale.
• .attr("y", 10): Sets the y attribute of the text element to 10 pixels.
• .attr("text-anchor", "middle"): Sets the text-anchor attribute of the text element to "middle".
• .text(function(d) { return d; }): Sets the text of the text element to the tick value.
• function update(h): Creates the update function.
• handle.attr("cx", x(h)): Sets the cx attribute of the circle element to the position of the handle on the scale.

Helpful links

• D3.js Slider Tutorial
• D3.js Documentation

Edit this code on GitHub