Change progress play bar to gradient color

[cochize1 40]

@Happy2Play under puzzle for you, based on @simzy code from this topic I changed colors of my progress bar to gradient, BUT

/* PROGRESS BAR - CHROME */
.emby-slider::-webkit-slider-thumb, .sliderBubble {
   background: #52b54b !important;
}
.emby-slider-background-lower {
   background: linear-gradient(to right, #52b54b 0%,#D4AF37 50%,#d35a34 100%) !important;
   background: linear-gradient(to right, #52b54b 0%,#D4AF37 50%,#d35a34 100%) !important;
   background: -webkit-linear-gradient(left, #52b54b 0%,#D4AF37 50%,#d35a34 100%) !important;
}
progress::-webkit-progress-value {
   background: linear-gradient(to right, #52b54b 0%,#52b54b 50%,#d35a34 100%) !important;
   background: -webkit-linear-gradient(left, #52b54b 0%,#D4AF37 50%,#d35a34 100%) !important;
}

/* PROGRESS BAR - FIREFOX */
.emby-slider::-moz-range-thumb, .mdl-slider:active::-moz-range-thumb {
   background: #52b54b !important;
}
.emby-slider::-moz-range-progress {
   background: linear-gradient(to right, #52b54b 0%,#D4AF37 50%,#d35a34 100%) !important;
   background: -moz-linear-gradient(left, #52b54b 0%, #D4AF37 50%, #d35a34 100%) !important;
}
progress::-moz-progress-bar {
   background: linear-gradient(to right, #52b54b 0%,#D4AF37 50%,#d35a34 100%) !important;
   background: -moz-linear-gradient(left, #52b54b 0%, #D4AF37 50%, #d35a34 100%) !important;
}

the code makes progress bar gradient from the begginig to the point where dot is at the moment.

Is there a way to:

1. make the progress bar gradient from beggining (green) through middle (yellow) to the end (red) and change respectivley to the current position (hope you understand what I mean)?

2. have the progress bar dot changing the color while moving along the bar so it starts with green and change smootlhly towards the yellow and then red when you are almost at the end of the movie?

Edited January 9, 2021 by cochize1

[Happy2Play 8278]

I don't believe it is possible via css.  If I understand correctly.

 

[cochize1 40]

16 hours ago, Happy2Play said:

I don't believe it is possible via css.  If I understand correctly.

 

just to be clear, in reference to the code I posted above this is what we have vs want we want

And you say that there is no option via css to base the overlay gradient color of the progress bar to change along the line? Of course I can't do it but it just seems it could be doable as the progress bar is always the same length no matter what duration of the movie we have. Please confirm so I can abandon thinking about it:)

[Happy2Play 8278]

So the entire track not the progress?

.emby-slider::-webkit-slider-runnable-track, .emby-slider::-moz-range-track {
  background: linear-gradient(to right, green 33%, yellow 33%, yellow 66%, red 66%) !important;
}

But the bubble can only change via a script at said points to my knowledge.

Looks like it looks different on Firefox also.

 

 

[cochize1 40]

this code seem to be working only in Firefox and has no effect in Chrome at all in my case. Yet again the FF it is as per your picture so not gradient but 3 separate colors.

Then again, that is not exactly what I wanted I think. I would like the foreground progress bar color to be changing along the way and leave the background dimmed bar in one color as it is.. Guess no easy way to do that.

[Happy2Play 8278]

Sorry didn't actually check Chrome as I was using the New Edge browser based off Chrome.

From my understanding no it would have to be scripted to change colors at said value/position.