jQuery水平缩放/拨号/规则

Question

试图找到一个jQuery插件，它会做这样的比例，但我还没能找到任何东西。基本上，箭头将保持不变，您可以向左/向右滑动规则以更改值。

有什么想法吗？

Answer 1

我认为实现这一目标的唯一方法是使用线性测量仪（正如我在评论中所述）并使用一些自定义javascript来强制它按照您的意愿行事，这里是一个超级基本的小提琴告诉你我的意思：

https://jsfiddle.net/vb4ak4zx/4/

HTML：

<button class="testbtn">
CHANGE VALUE
</button>
<div style="height:150px">
    <div id="lineargauge"></div>
</div>

的javascript / jquery的

$(function () {
            $("#lineargauge").igLinearGauge({
                height: "80px",
                width: "100%",
                value: 150,
                minimumValue: 100,
                maximumValue: 200,
                ranges: [
                    {
                        startValue: 100, endValue: 150, name: "range1"
                    },
                    {
                        startValue: 150, endValue: 200, name: "range2"
                    }
                ]
            });
        });

        $(document).on("click", ".testbtn", function(){
        $("#lineargauge").igLinearGauge({
                height: "80px",
                width: "100%",
                value: 50,
                minimumValue: 0,
                maximumValue: 100,
                ranges: [
                    {
                        startValue: 0, endValue: 50, name: "range1"
                    },
                    {
                        startValue: 50, endValue: 100, name: "range2"
                    }
                ]
            });
        });