a custom scaled slider

http://stackoverflow.com/questions/21780322/why-is-initial-drag-position-incorrect-when-using-a-scale

by Nivaldo

HTML

<p id="value">Value</p>

CSS

.slider {  
    stroke: black;
    fill: white;
    stroke-width: 1.5px;
    border: 1px solid #741;
}

JavaScript

var w = 400, 
    h = 25,
    r = h / 2.5,
    scale = d3.scale.linear(),
    domain = [0, 100];

scale.rangeRound([0, w]).domain([0, 100]);

var drag = d3.behavior.drag()
    .origin(Object)
    .on("drag", dragmove);

var svg = d3.select('body').append('svg')
    .classed('slider', true)
    .attr('width', w)
    .attr('height', h);

var number = 50;

var slider = svg.selectAll('circle')
    .data([{ x: scale(number), y: h / 2 }]);

slider.enter().append('circle')
    .attr('r', r)
    .attr('cx', function(d) { return d.x; })
    .attr('cy', function(d) { return d.y; })
    .call(drag);

function dragmove(d) {
    var x = Math.max(r, Math.min(w - r, d3.event.x));
    var numberNow = scale.invert(x);
    
    slider.attr("cx", d.x = x);
    d3.select('#value').text(numberNow);
}