slider

_.md

[ Launch: Tributary inlet ] 5688883 by georules

config.json

{"description":"slider","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/cwOVRz7.png"}

inlet.js

var svg = d3.select("svg");

var xpos = 80;
var ypos = 60;
var width = 100;
var height = 100;
var barH = height/5;

drag1 = d3.behavior.drag()
  .origin(Object)                   
  .on("drag", function(d) {
    //d.x = d3.event.x;
    d.y = d3.event.y;
	thisH = this.height.baseVal.value;
    if (d.y > ypos + height - thisH) {
      d.y = ypos+height-thisH;
    }
    if (d.y < ypos) {
      d.y = ypos;
    }
    
    var a=svg.selectAll(".sliderRect");
    a.attr("x", function(d) {return d.x})
    .attr("y", function(d) {return d.y});
  });


var holder = svg.append("rect")
.attr({width: width, height: height, x:xpos, y:ypos});

ge = svg.selectAll(".sliderRect")
.data([{x:xpos,y:ypos+height-barH}]);

ge.enter().append("rect").attr({width:width,height:barH})
.attr("class","sliderRect")
.style({fill: "yellow"})
.attr("x", function(d) {return d.x})
.attr("y", function(d) {return d.y})
.call(drag1);