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> 

ジャバスクリプト/ jquer Y

$(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" 
        } 
       ] 
      }); 
     });