JSFiddle - React, Tailwind, and code Playground

by hmdadou

HTML

<div class="bars">

<input type="range" min="0" max="1" step="0.1" id="volume-range" value="0.5">

</div>

CSS

.bars {
    width: 100%;
    height: 20px; /* adjust this value as desired */
    background-image: 
        repeating-linear-gradient(to right, black 0, black 1px, transparent 1px, transparent 30px);
}

JavaScript

$(document).ready(function() {
    for (var i = 0; i < 100; i++) {
        $('.bars').append('|');
    }
});