Что внизу - то я нашел где-то, собрал в один хтмл и все там ноормально работает, но, там написано на какой-то херне 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>
