Adjustable colorbar

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="//d3js.org/d3.v3.min.js"></script>
    <style>
        svg {
            border: 1px solid #f90;
            margin: 32px;
        }
        rect {
            float: left;
            border: solid 100px #aaa;
        }

.legend text h1{
            font-family: arial;
            font-size: 12px;
            fill: lightgray;
        }
        h1{
            font-family: Arial;
            color: grey;
            margin-left: 40px;
            margin-top: 100px;
            text-decoration: underline;
        }
    </style>
</head>
<h1>Adjustable Legend Color Scale</h1>
<body>

var drag = d3.behavior.drag()
            .origin(Object)
            .on("drag", dragMove)
            .on('dragend', dragEnd);

var svg = d3.select('body')
            .append('svg')
            .style('float','left')
            .attr("height", 120)
            .attr("width", width);

var g = svg.append('g')
            .attr("height", 200)
            .attr("width", width)
            .attr('transform', 'translate(0, 10)');
    var rect = g
            .append('rect')
            .attr('y', 17.5)
            .attr("height", 5)
            .attr("width", width)
            .attr('fill', '#C0C0C0');

g.selectAll('g')
            .data(sliderData)
            .enter()
            .append("rect")
            .attr("id",function(d,i){
                return "slider" + i;
            })
            .attr("width", 10)
            .attr("x", function(d) {
                return d.x
            })
            .attr("y", function(d) {
                return 0;
            })
            .attr("height", 40)
            .attr("fill", "#2394F5")
            .call(drag);

svg.append('g')
            .attr('id','legendGroup');

function draw(minMax){
        var minVal = minMax[0];
        var maxVal = minMax[1];
        var data = d3.range(Math.round(minVal),Math.round(maxVal), (Math.round(maxVal) - Math.round(minVal))/20);
        var o = d3.scale.ordinal()
                .domain(data)
                .rangeBands([Math.round(minVal), Math.round(maxVal)]);

var colors = d3.scale.category20();

var legend = d3.select('#legendGroup')
                .selectAll('rect.example2')
                .data(data);

// enter selection
        legend.enter().append('rect');

// update selection
        legend.attr('class', 'example2')
                .attr('id',function(d,i){
                    return "rect"+i;
                })
                .style('fill', colors)
                .attr('x', function(d) { return Math.round(o(d)) })
                .attr('y', 60)
                .attr('width', Math.round(o.rangeBand()))
                .attr('height', 50);

// exit selection
        legend
                .exit().remove();

var rectLeft = d3.select('#legendGroup').selectAll('#rect-left')
                .data([data[0]]);
        var rectRight = d3.select('#legendGroup').selectAll('#rect-right')
                .data([data[data.length - 1]]);

// enter left right
        rectLeft.enter().append('rect');
        rectRight.enter().append('rect');
        //append left right
        rectLeft
                .attr('id','rect-left')
                .style('fill',colors.range()[0])
                .attr('x',0)
                .attr('y', 60)
                .attr('width', Math.round(o(data[0])))
                .attr('height', 50);
        rectRight
                .attr('id','rect-left')
                .style('fill',colors.range()[colors.range().length - 1])
                .attr('x',Math.round(o(data[data.length - 1])))
                .attr('y', 60)
                .attr('width', width - Math.round(o(data[data.length - 1])))
                .attr('height', 50);

// exit left right
        rectLeft.exit().remove();
        rectRight.exit().remove()
    }
    function dragMove(d) {
        d3.select(this)
                .attr("opacity", 0.6)
                .attr("x", d.x = Math.max(0, Math.min(width-10, d3.event.x)));
        update()
    }

function dragEnd() {
        d3.select(this)
                .attr('opacity', 1);
        }

function update(){
        var val1 = d3.select('#slider0').data().map(function(d){return d.x;});
        var val2 = d3.select('#slider1').data().map(function(d){return d.x;});

var minVal = d3.min([val1[0], val2[0]]);
        var maxVal = d3.max([val1[0], val2[0]]);
        var minMax = [minVal, maxVal];
        draw(minMax);
    }
    var val1 = d3.select('#slider0').data().map(function(d){return d.x;});
    var val2 = d3.select('#slider1').data().map(function(d){return d.x;});

var minVal = d3.min([val1[0], val2[0]]);
    var maxVal = d3.max([val1[0], val2[0]]);
    var minMax = [minVal, maxVal];
    window.onload = draw(minMax);
</script>
</body>
</html>

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