input type range - how to change thumb color on click [duplicate]

Question

click on .dinp here changes its color but I need to change the color of its thumb (circle) instead

$('.dinp').on('click', function(){
    $('.dinp').css('background', '#bbb');
    $(this).css('background', 'red');
});

.dinp{
    -webkit-appearance: none;
    appearance: none;
    display:block;
    background:#bbb;
    height:4px;
    margin-top:20px;
    cursor:pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='range' min='-100' max='100' value='0' class='dinp'>
<input type='range' min='-100' max='100' value='0' class='dinp'>
<input type='range' min='-100' max='100' value='0' class='dinp'>