tsyber1an/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
    <style type="text/css">

svg {
  background: #333;
}

.slider line {
  stroke: white;
  stroke-width: 10;
  cursor: pointer;
}

    </style>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/javascript">

    var Sample = {
      initialize: function(settings) {
        this.width = 960;
        this.height = 500;
        this.padding = 20;


        this.plot();

      },

      plot: function(){
        var container = d3.select("#example"),
            padding = this.padding,
            sliderLineWidth = this.sliderLineWidth,
            width = this.width,
            outputs = this.dataOutput,
            editTriggers = this.editTriggers;

        var vis = container.append("svg")
          .attr("width", this.width + this.padding * 2)
          .attr("height", this.height + this.padding * 2)
          .append("g")
          .attr("transform", "translate(" + this.padding + "," + this.padding + ")");

        var slider = vis.append("g").attr("class", "slider");

        // safe layer for slider ability (provide correct & smooth mouse move)
        var rect = slider.append("svg:rect")
          .attr("class", "layer")
          .attr("transform", "translate(0, "+this.padding+")")
          .attr("width", this.width)
          .attr("height", this.height);

        // util
        var _dragSliderLine;

        var sliderLine = slider.append("line")
          .attr("x1", 100)
          .attr("x2", 100)
          .attr("y1", -this.padding*2)
          .attr("y2", this.height + this.padding*2)
          .attr("stroke-width", sliderLineWidth)
          .on("mousedown", function(){
            d3.event.preventDefault();
            _dragSliderLine = this;

            this.style.cursor = "move";
            document.body.focus();
            document.onselectstart = function () { return false; };

            return false;
          });


        vis.on("mouseup", function(){
            d3.event.preventDefault();
            if (_dragSliderLine != null){
              _dragSliderLine.style.cursor = "pointer";
              _dragSliderLine = null;
            }
          });

        rect.on("mousemove", function(){
            d3.event.preventDefault();

            if( _dragSliderLine != null ){

              // store relative x coordinate
              //var fix = /WebKit/.test( navigator.userAgent ) ? 30 : 0;
              var coordinateX = d3.mouse(this)[0];// + fix;

              // apply changes
              sliderLine.attr("x1", coordinateX).attr("x2", coordinateX);
            }
          });

      }
    };

    Sample.initialize({});

    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
	<style type="text/css">

	svg {
	background: #333;
	}

	.slider line {
	stroke: white;
	stroke-width: 10;
	cursor: pointer;
	}

	</style>
	</head>
	<body>
	<div id="example"></div>
	<script type="text/javascript">

	var Sample = {
	initialize: function(settings) {
	this.width = 960;
	this.height = 500;
	this.padding = 20;


	this.plot();

	},

	plot: function(){
	var container = d3.select("#example"),
	padding = this.padding,
	sliderLineWidth = this.sliderLineWidth,
	width = this.width,
	outputs = this.dataOutput,
	editTriggers = this.editTriggers;

	var vis = container.append("svg")
	.attr("width", this.width + this.padding * 2)
	.attr("height", this.height + this.padding * 2)
	.append("g")
	.attr("transform", "translate(" + this.padding + "," + this.padding + ")");

	var slider = vis.append("g").attr("class", "slider");

	// safe layer for slider ability (provide correct & smooth mouse move)
	var rect = slider.append("svg:rect")
	.attr("class", "layer")
	.attr("transform", "translate(0, "+this.padding+")")
	.attr("width", this.width)
	.attr("height", this.height);

	// util
	var _dragSliderLine;

	var sliderLine = slider.append("line")
	.attr("x1", 100)
	.attr("x2", 100)
	.attr("y1", -this.padding*2)
	.attr("y2", this.height + this.padding*2)
	.attr("stroke-width", sliderLineWidth)
	.on("mousedown", function(){
	d3.event.preventDefault();
	_dragSliderLine = this;

	this.style.cursor = "move";
	document.body.focus();
	document.onselectstart = function () { return false; };

	return false;
	});


	vis.on("mouseup", function(){
	d3.event.preventDefault();
	if (_dragSliderLine != null){
	_dragSliderLine.style.cursor = "pointer";
	_dragSliderLine = null;
	}
	});

	rect.on("mousemove", function(){
	d3.event.preventDefault();

	if( _dragSliderLine != null ){

	// store relative x coordinate
	//var fix = /WebKit/.test( navigator.userAgent ) ? 30 : 0;
	var coordinateX = d3.mouse(this)[0];// + fix;

	// apply changes
	sliderLine.attr("x1", coordinateX).attr("x2", coordinateX);
	}
	});

	}
	};

	Sample.initialize({});

	</script>
	</body>
	</html>