<svg width="500" height="320">
<linearGradient id="linear" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" stop-color="#9896B4"/>
<stop offset="100%" stop-color="#807EFA"/>
<path stroke="rgba(0,0,0,0.2)" fill="none" stroke-width="4"
stroke-linecap="round" d="M 60 10 L 60 310"/>
<path stroke="rgba(0,0,0,0.2)" fill="none" stroke-width="4"
stroke-linecap="round" d="M 120 10 L 120 310"/>
<path stroke="rgba(0,0,0,0.2)" fill="none" stroke-width="4"
stroke-linecap="round" d="M 180 10 L 180 310"/>
<path stroke="rgba(0,0,0,0.2)" fill="none" stroke-width="4"
stroke-linecap="round" d="M 240 10 L 240 310"/>
<path stroke="rgba(0,0,0,0.2)" fill="none" stroke-width="4"
stroke-linecap="round" d="M 300 10 L 300 310"/>
<path stroke="rgba(0,0,0,0.2)" fill="none" stroke-width="4"
stroke-linecap="round" d="M 360 10 L 360 310"/>
<path stroke="rgba(0,0,0,0.2)" fill="none" stroke-width="4"
stroke-linecap="round" d="M 420 10 L 420 310"/>
<rect class="amount-track" name="0" width="4" x="58" fill="url(#linear)" />
<circle cx="60" cy="310" r="2" fill="#807EFA"/>
<rect class="amount-track" name="1" width="4" x="118" fill="url(#linear)" />
<circle cx="120" cy="310" r="2" fill="#807EFA"/>
<rect class="amount-track" name="2" width="4" x="178" fill="url(#linear)" />
<circle cx="180" cy="310" r="2" fill="#807EFA"/>
<rect class="amount-track" name="3" width="4" x="238" fill="url(#linear)" />
<circle cx="240" cy="310" r="2" fill="#807EFA"/>
<rect class="amount-track" name="4" width="4" x="298" fill="url(#linear)" />
<circle cx="300" cy="310" r="2" fill="#807EFA"/>
<rect class="amount-track" name="5" width="4" x="358" fill="url(#linear)" />
<circle cx="360" cy="310" r="2" fill="#807EFA"/>
<rect class="amount-track" name="6" width="4" x="418" fill="url(#linear)" />
<circle cx="420" cy="310" r="2" fill="#807EFA"/>
<circle class="dragger" name="0" cx="60" r="8" stroke="rgba(0,0,0,0.4)" stroke-width="1" fill="white" />
<circle class="dragger" name="1" cx="120" r="8" stroke="rgba(0,0,0,0.4)" stroke-width="1" fill="white" />
<circle class="dragger" name="2" cx="180" r="8" stroke="rgba(0,0,0,0.4)" stroke-width="1" fill="white" />
<circle class="dragger" name="3" cx="240" r="8" stroke="rgba(0,0,0,0.4)" stroke-width="1" fill="white" />
<circle class="dragger" name="4" cx="300" r="8" stroke="rgba(0,0,0,0.4)" stroke-width="1" fill="white" />
<circle class="dragger" name="5" cx="360" r="8" stroke="rgba(0,0,0,0.4)" stroke-width="1" fill="white" />
<circle class="dragger" name="6" cx="420" r="8" stroke="rgba(0,0,0,0.4)" stroke-width="1" fill="white" />
<input type="range" value="50" orient="vertical" name='0' style="left: 60px;"/>
<input type="range" value="75" orient="vertical" name='1' style="left: 120px;"/>
<input type="range" value="25" orient="vertical" name='2' style="left: 180px;"/>
<input type="range" value="90" orient="vertical" name='3' style="left: 240px;"/>
<input type="range" value="10" orient="vertical" name='4' style="left: 300px;"/>
<input type="range" value="60" orient="vertical" name='5' style="left: 360px;"/>
<input type="range" value="50" orient="vertical" name='6' style="left: 420px;"/>
<div class="lab">32</div>
<div class="lab">64</div>
<div class="lab">128</div>
<div class="lab">256</div>
<div class="lab">512</div>
<div class="lab">1K</div>
<div class="lab">2K</div>
<p>Based on a <a href="https://dribbble.com/shots/2263756-Day-090-Equalizer" target="_blank"><img src="https://d13yacurqjgara.cloudfront.net/assets/dribbble-ball-big-77cb1edbdf66504815845c671e84465c.png"></a> by <a href="https://dribbble.com/NpaulFlavius" target="_blank">Paul Flavius Nechita</a></p>