bit slider

_.md

[ Launch: slider ] 5689044 by georules
[ Launch: Tributary inlet ] 5688883 by georules

config.json

{"description":"bit 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/KD2mI6M.png"}

inlet.js

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

var xpos = 50;
var ypos = 50;
var width = 50;
var height = 100;
var barH = height/6;

drag1 = d3.behavior.drag()
  .origin(Object)                   
  .on("drag", function(d) {
    //d.x = d3.event.x;
    d.y = d3.event.y;
    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");
    }
  });


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

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

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-10, y:ypos+height/2 -5})

var fsize = 38;
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")