linked slider-input

This is a d3 step slider inspired by Mike Bostock's d3 Slider (https://bl.ocks.org/mbostock/6452972). This instance has an addition of a "STEP" value that makes it work just like a jQuery slider initiated with a step value. Change the step to either null or 0 to get the drag value as is!

forked from shashank2104's block: d3 Step Slider

forked from noblemillie's block: d3 Step Slider

forked from noblemillie's block: linked slider-input

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>d3 Slider</title>

// append svg
    var svg = d3.select('div#chart').append('svg')
        .attr('width', width)
        .attr('height', height);

var slider = svg.append('g')
        .classed('slider', true)
        .attr('transform', 'translate(' + margin.left +', '+ (height/2) + ')');

// using clamp here to avoid slider exceeding the range limits
    var xScale = d3.scaleLinear()
        .domain(range)
        .range([0, width - margin.left - margin.right])
        .clamp(true);

// array useful for step sliders
    var rangeValues = d3.range(range[0], range[1], step || 1).concat(range[1]);
    var xAxis = d3.axisBottom(xScale).tickValues(rangeValues).tickFormat(function (d) {
        return d;
    });

xScale.clamp(true);
    // drag behavior initialization
    var drag = d3.drag()
        .on('start.interrupt', function () {
            slider.interrupt();
        }).on('start drag', function () {
            dragged(d3.event.x);
        });

// this is the main bar with a stroke (applied through CSS)
    var track = slider.append('line').attr('class', 'track')
        .attr('x1', xScale.range()[0])
        .attr('x2', xScale.range()[1]);

// this is a bar (steelblue) that's inside the main "track" to make it look like a rect with a border
    var trackInset = d3.select(slider.node().appendChild(track.node().cloneNode())).attr('class', 'track-inset');

var ticks = slider.append('g').attr('class', 'ticks').attr('transform', 'translate(0, 4)')
        .call(xAxis);

// drag handle
    var handle = slider.append('circle').classed('handle', true)
        .attr('r', 8);

// this is the bar on top of above tracks with stroke = transparent and on which the drag behaviour is actually called
    // try removing above 2 tracks and play around with the CSS for this track overlay, you'll see the difference
    var trackOverlay = d3.select(slider.node().appendChild(track.node().cloneNode())).attr('class', 'track-overlay')
        .call(drag);

// text to display
    var text = svg.append('text').attr('transform', 'translate(' + (width/2) + ', ' + height/3 + ')')
        .text('Value: 0');

// initial transition
    slider.transition().duration(1050)
        .tween("drag", function () {
            var i = d3.interpolate(0, 14);
            return function (t) {
                dragged(xScale(i(t)));
            }
        });

</body>
</html>

https://d3js.org/d3.v4.min.js