<div>
    <label for="{{id}}-slider">{{name}}</label>
    <button class="mdc-button mdc-button--outlined mute-button d-inline-block v-align-middle"
        aria-label="Mute"
        aria-pressed="false">
        <div class="mdc-button__ripple"></div>
        <span class="mdc-button__label">Mute</span>
    </button>
    <div class="mdc-slider mdc-slider--discrete volume-slider" id="{{id}}-slider" tabindex="0" role="slider" data-step="1"
        aria-valuemin="1" aria-valuemax="100" aria-valuenow="80"
        aria-label="Volume {{name}}">
        <div class="mdc-slider__track-container">
        <div class="mdc-slider__track"></div>
        </div>
        <div class="mdc-slider__thumb-container">
        <div class="mdc-slider__pin">
        <span class="mdc-slider__pin-value-marker">60</span>
        </div>
        <svg class="mdc-slider__thumb" width="21" height="21">
        <circle cx="10.5" cy="10.5" r="7.875"></circle>
        </svg>
        <div class="mdc-slider__focus-ring"></div>
        </div>
    </div>
</div>