bit slider with animation+drag

_.md

[ Launch: bit slider with animation+drag ] 6480308 by georules
[ Launch: bit slider ] 5689147 by georules
[ Launch: slider ] 5689044 by georules
[ Launch: Tributary inlet ] 5688883 by georules

config.json

{"description":"bit slider with animation+drag","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":true,"loop":true,"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/E6lngN8.gif"}

inlet.js

tributary.loop_type="pingpong"
var svg = d3.select("svg");

var xpos = 50;
var ypos = 50;
var width = 598;
var height = 577;
var barH = height/30;

function update(d,loc)	{
  console.log(loc);
  //d.x = d3.event.x;
    d.y = loc;
    if (d.y > ypos + height - barH) {
      d.y = ypos+height-barH;
    }
    if (d.y < ypos) {
      d.y = ypos;
    }
       
    d.h = Math.max((height-d.y+ypos), barH);
    
    var a=svg.selectAll(".sliderRect");
    a.attr("x", function(d) {return d.x})
    .attr("y", function(d) {return d.y})
    .attr("height", function(d) {return d.h})
    
    num = svg.selectAll(".thenumber");
    if (d.y > ((ypos + height - barH) + (ypos)) /2)	{
      num.text("0");
    }
    else{
      num.text("1");
    }
}

drag1 = d3.behavior.drag()       
  .on("drag", function(d) {
    update(d,d3.event.y)
    toggle=false;
  })
.on("dragend",function(d) {
  toggle=true;
});

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

var sl = {x:xpos,y:ypos+height-barH,h:barH};

ge = svg.selectAll(".sliderRect")
.data([sl]);

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

svg.append("rect").attr({width: width+20, height: 10, x:xpos-11, y:ypos+height/2 -6})

var fsize = 190;
svg.append("text").text("0")
.attr("x",xpos+width+10).attr("y",ypos+height/2).style("fill","#FF1111")
.style("font-family","Courier")
.style("font-weight","Bold")
.style("font-size",fsize)
.attr("class","thenumber")

var swappa = false;
var toggle = true;
tributary.run = function(g,t)	{
  dd = (1-t) * (height-ypos) *3;
  if(toggle)
  	update(sl,dd);
  
}