JSFiddle - React, Tailwind, and code Playground

HTML

<input class="topcoat-range-input" type="range" value="0" min="0" max="100" data-role="none" step="1">
<div class='button'>Change Color!</div>

CSS

.button {
    margin:50px;
    padding:5px;
    background:green;
}
.range-input, .topcoat-range-input{
    padding: 0;
    margin: 0;
    background: transparent;
    border: none;
    box-sizing: border-box;
    background-clip: padding-box;
    vertical-align: top;
    outline: none;
    -webkit-appearance: none;
}
.range-input::-webkit-slider-thumb, .topcoat-range-input::-webkit-slider-thumb, .topcoat-range-input--vertical::-webkit-slider-thumb {
    cursor: pointer;
    -webkit-appearance: none;
}
/*Track*/
 .topcoat-range-input {
    border-radius: 6px;
    border: 1px solid rgb(90, 90, 90);
    background: rgba(255, 255, 255, 0);
    height: 1.5rem;
    width: 85%;
    border-radius: 30px;
}
.topcoat-range-input::-webkit-slider-thumb {
    height: 40px;
    width: 40px;
    border: 1px solid rgba(0, 0, 0, 0.36);
    border-radius: 30px;
    background: rgba(131, 208, 255, 0.75);
    box-shadow: 0 0 20px 2px rgba(131, 208, 345, 0.75);
}

.topcoat-range-input.applied::-webkit-slider-thumb {
    background : rgba(255, 208, 255, 0.75);
}

JavaScript

$('.button').on('click', function (e) {
    $('.topcoat-range-input').addClass('applied');
});