一款html5音量调节器鼠标拖动控制音量调节器代码，使用简单，操作方便。

使用方法

在页面引入相关文件TweenLite.min.js、Draggable.min.js文件

<script type="text/javascript" src='js/jquery.js'></script>
<script type="text/javascript" src='js/TweenLite.min.js'></script>
<script type="text/javascript" src='js/Draggable.min.js'></script>
<script type="text/javascript" src='js/CSSPlugin.min.js'></script>
<script type="text/javascript" src="js/index.js"></script>

HTML结构

<div id="icon" class="icon">
  
    <svg class="outline" viewBox="0 0 216 216" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg">
        <defs>
          <linearGradient x1="16.291%" y1="13.917%" x2="88.893%" y2="80.425%" id="a">
              <stop stop-color="#B0DBDD" offset="0%"/>
              <stop stop-color="#0AA3C9" offset="100%"/>
          </linearGradient>
        </defs>
        <g fill="none" fill-rule="evenodd">
            <path d="M10 108c0-54.124 43.876-98 98-98s98 43.876 98 98-43.876 98-98 98-98-43.876-98-98z" stroke="rgba(0,0,0,.4)" stroke-width="6"/>
            <path id="path" class="path" d="M10 108c0-54.124 43.876-98 98-98s98 43.876 98 98-43.876 98-98 98-98-43.876-98-98z" stroke="url(#a)" stroke-width="4"/>
        </g>
    </svg>
      
    <div class="wheel">
        <div id="indicator" class="indicator"></div>
    </div>
      
</div>