sliders

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
	<script src="cubehelix.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
    .slider .background { stroke: #ccc; stroke-width: 5px; fill: none; }
  </style>
</head>
 
<body>
  <script>
    console.clear()
    
    var margin = {top: 10, right: 10, bottom: 10, left: 10};
    var width = 960 - margin.left - margin.right;
    var height = 500 - margin.top - margin.bottom;
    
    var svg = d3.select("body").append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
    
    var rainbow = d3.scale.cubehelix()
        .domain([0, .5, 1])
        .range([
          d3.hsl(-100, 0.75, 0.35),
          d3.hsl(  80, 1.50, 0.80),
          d3.hsl( 260, 0.75, 0.35)
        ])
    
    var size = {height: 100, width: 500, 
                target: {height: 100, width: 50}}
    
    var horizontalSlider = function(){
      var sliderX = 0,
          sliderY = 0, 
          sliderHeight = 100,
          sliderWidth = 100,
          horizontal = true;

var _bar;
      
      var scale = d3.scale.linear()
        .range([0, sliderWidth])
        .domain([0, 100])
        .nice()
        .clamp(true);

var brush = d3.svg.brush()
          .x(scale)
          .extent([0, 0])
          .on("brush", brushed)
          .on("brushend", brushended);

function thisSlider(selection) {
        selection.each(function(raw){

if (horizontal) scale.range([0, sliderWidth]);
        if (!horizontal) scale.range([sliderHeight, 0]);
        
        var _slider = d3.select(this)
            .attr("transform", "translate(" + sliderX + "," + sliderY + ")")
            .attr("class", "slider")
            .call(brush);

_slider.selectAll(".extent,.resize")
            .remove();

_slider.select(".background")
            .attr("height", sliderHeight)
            .attr("width", sliderWidth)
            .style("cursor", horizontal ? "ew-resize": "ns-resize")
            .style("visibility", "visible");

_bar = _slider.append("rect")
            .attr("class", "slider-bar")
            .style("pointer-events", "none")
            .attr({x: 0, y: 0, width: sliderWidth, height: sliderHeight})

_slider
            .call(brush.extent([100, 100]))
            .call(brush.event)
          .transition().duration(3000).ease("bounce")
            .call(brush.extent([10, 10]))
            .call(brush.event);
      	});
			
      }
      
        function brushed() {

var value = brush.extent()[0];

//console.log(value)
          if (d3.event.sourceEvent) { // not a programmatic event
            value = scale.invert(d3.mouse(this)[horizontal ? 0 : 1]);
            brush.extent([value, value]);
          }

_bar.attr("x", 0)
          		.attr("y", horizontal ? 0 : sliderHeight - scale(value) )
            	.attr("width", horizontal ? scale(value) : sliderWidth)
          		.attr("height", horizontal ? sliderHeight : scale(value))
              .style("fill", rainbow(scale(value) / 
                             (horizontal ? sliderWidth : sliderHeight)));

}

function brushended() {
          var value = brush.extent()[horizontal ? 0 : 1];
          if (!d3.event.sourceEvent) return; // only transition after input
        }

thisSlider.x = function(value) {
        if (!arguments.length) return sliderX;
        sliderX = value;
        return thisSlider;
      };

thisSlider.y = function(value) {
        if (!arguments.length) return sliderY;
        sliderY = value;
        return thisSlider;
      };
      
      thisSlider.width = function(value) {
        if (!arguments.length) return sliderWidth;
        sliderWidth = value;
				return thisSlider;
      };

thisSlider.height = function(value) {
        if (!arguments.length) return sliderHeight;
        sliderHeight = value;
        //if (!horizontal) scale.range([sliderHeight, 0]);
        return thisSlider;
      };

thisSlider.horizontal = function(value) {
        if (!arguments.length) return horizontal;
        horizontal = value;
        //if (horizontal) brush.x(scale).y(null);
        //if (!horizontal) brush.y(scale).x(null);
        //if (horizontal) scale.range([0, sliderWidth]);
        //if (!horizontal) scale.range([sliderHeight, 0]);
        return thisSlider;
      };
      
      thisSlider.vertical = function(value) {
        if (!arguments.length) return !horizontal;
        horizontal = !value;
        if (horizontal) brush.x(scale).y(null);
        if (!horizontal) brush.y(scale).x(null);
        //if (horizontal) scale.range([0, sliderWidth]);
        //if (!horizontal) scale.range([sliderHeight, 0]);
        return thisSlider;
      };
      
      return thisSlider;
    }
    
    var verticalSlider = function(){
      var sliderX = 0,
          sliderY = 0, 
          sliderHeight = 100,
          sliderWidth = 100,
          horizontal = true;

var _bar;
      
      var scale = d3.scale.linear()
        .range([sliderHeight, 0])
        .domain([0, 100])
        .nice()
        .clamp(true);

var brush = d3.svg.brush()
          .y(scale)
          .extent([0, 0])
          .on("brush", brushed)
          .on("brushend", brushended);

function thisSlider(selection) {
        selection.each(function(raw){

_slider.selectAll(".extent,.resize")
            .remove();

_bar = _slider.append("rect")
            .attr("class", "slider-bar")
            .style("pointer-events", "none")
            .attr({x: 0, y: 0, width: sliderWidth, height: sliderHeight})

var value = brush.extent()[0];

if (d3.event.sourceEvent) { // not a programmatic event
            value = scale.invert(d3.mouse(this)[horizontal ? 0 : 1]);
            brush.extent([value, value]);
          }

_bar.attr("x", 0)
          		.attr("y", horizontal ? 0 : scale(value) )
            	.attr("width", horizontal ? scale(value) : sliderWidth)
          		.attr("height", horizontal ? sliderHeight : sliderHeight -scale(value))
              .style("fill", rainbow(scale(value) / 
                             (horizontal ? sliderWidth : sliderHeight)));

}

function brushended() {
          var value = brush.extent()[horizontal ? 0 : 1];
          if (!d3.event.sourceEvent) return; // only transition after input
        }

thisSlider.x = function(value) {
        if (!arguments.length) return sliderX;
        sliderX = value;
        return thisSlider;
      };

thisSlider.horizontal = function(value) {
        if (!arguments.length) return horizontal;
        horizontal = value;
        //if (horizontal) brush.x(scale).y(null);
        //if (!horizontal) brush.y(scale).x(null);
        //if (horizontal) scale.range([0, sliderWidth]);
        //if (!horizontal) scale.range([sliderHeight, 0]);
        return thisSlider;
      };
      
      thisSlider.vertical = function(value) {
        if (!arguments.length) return !horizontal;
        horizontal = !value;
        if (horizontal) brush.x(scale).y(null);
        if (!horizontal) brush.y(scale).x(null);
        //if (horizontal) scale.range([0, sliderWidth]);
        //if (!horizontal) scale.range([sliderHeight, 0]);
        return thisSlider;
      };
      
      return thisSlider;
    }
    
    var mySlider1 = verticalSlider().vertical(true).x(0).y(0).height(400).width(100)
    var mySlider2 = verticalSlider().vertical(true).x(150).y(0).height(300).width(100);
    var mySlider3 = horizontalSlider().x(500).y(0).height(100).width(400);
    var mySlider4 = horizontalSlider().x(500).y(150).height(100).width(300);
    
    svg.append("g").call(mySlider1)
    svg.append("g").call(mySlider2)
    svg.append("g").call(mySlider3)
    svg.append("g").call(mySlider4)
    
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js