Javascript-форум - Как допилить круглый svg-слайдер до диапазона

Что внизу - то я нашел где-то, собрал в один хтмл и все там ноормально работает, но, там написано на какой-то херне d3js, и во-вторых у меня не хватает извилин разобраться еще и с SVG, а задача такая:

Надо сделать 2 ползунка по кругу и чтобы их значения выводились через событие в 2 поля ввода. Дело в том, что линейные элементы управления становятся бесполезными на больших диапазонах, скажем цена от 10 до 50000. Можно, конечно, логарифмировать, но чисто геометрически растянуть - проще, а чтобы слайдер нормально влезал в панель фильтра на странице - его можно сделать круглым.

Или, если есть на примете готовое решение, только блин не жирное, и не на канвасе и не на css, а так же - на svg, - то дайте пожалуйста ссылку. Заранее спасибо.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>D3.js Round Slider</title>
    <script src="http://d3js.org/d3.v3.min.js"></script>
  <style>
  
 .circumference {
  fill: #fff;
  stroke: #f2f2f2;
  stroke-width: 5px;
}

.dot circle:hover {
  cursor: pointer;
}

.dot circle {
  fill: lightsteelblue;
  stroke: steelblue;
  stroke-width: 1.5px;
}

.dot circle.dragging {
  fill: red;
  stroke: brown;
} 
  </style>
  </head>
  <body>
    <script>
var width = 960,
    height = 500;

var circumference_r = 100;

var drag = d3.behavior.drag()
  .origin(function(d) { return d; })
  .on("dragstart", dragstarted)
  .on("drag", dragged)
  .on("dragend", dragended);

var svg = d3.select("body").append("svg")
  .attr("width", width)
  .attr("height", height)
  .append("g")
    .attr("transform", "translate(" + width/2 + "," + height/2 + ")");

var container = svg.append("g");

var circumference = container.append('circle')
  .attr('r', circumference_r)
  .attr('class', 'circumference');

handle = [{
  x: 0,
  y: -circumference_r
}];

handle_circle = container.append("g")
  .attr("class", "dot")
    .selectAll('circle')
  .data(handle)
    .enter().append("circle")
  .attr("r", 5)
  .attr("cx", function(d) { return d.x;})
  .attr("cy", function(d) { return d.y;})
  .call(drag);

function dragstarted(d) {
  d3.event.sourceEvent.stopPropagation();
  d3.select(this)
    .classed("dragging", true);
}

function dragged(d) {  
  d_from_origin = Math.sqrt(Math.pow(d3.event.x,2)+Math.pow(d3.event.y,2));
  
  alpha = Math.acos(d3.event.x/d_from_origin);
  
  d3.select(this)
    .attr("cx", d.x = circumference_r*Math.cos(alpha))
    .attr("cy", d.y = d3.event.y < 0 ? -circumference_r*Math.sin(alpha) : circumference_r*Math.sin(alpha));
}

function dragended(d) {
  d3.select(this)
    .classed("dragging", false);
}	
	</script>
  </body>
</html>