How can I transition from one "multi-color" linear-gradient to another using just css?

Question

I'm attempting to create an html slider using css where the track has a 3 color gradient which transitions to a different 3 color gradient where ever the slider thumb stops. I've seen lots of examples of how to do this with solid colors but not a 3 color gradient.

Html

<div class="slidecontainer">
    <input type="range" min="100" max="1500" value="460" class="slider" onchange="updateLoanAmount(this.value)" id="loanRange">
</div>

CSS

.slider {
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(#29592e, #8bce34, #29592e);
    outline: none;
    opacity: 0.9;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

Transition To

linear-gradient(#77777a, #ffffff, #77777a);

I attempted to upload an image to provide a better explanation but my account is too new and Stack Overflow won't allow me to do that yet - apologies...