Widget slider personnalisable

[wojc]

Bonjour à tous,
j’essaye de faire un Slider personnalisable, mais je bloque sur une fonction.
J’aimerais que lorsque je glisse le curseur vers la droite, la barre de progression progresse en même temps avec une couleur personnalisée.
Voici le code :

<div class="cmd cmd-widget" data-type="action" data-subtype="slider" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" style="width:100%; height:100%;">
    <div class="cmdName" style="font-weight: bold;font-size : 12px;#hideCmdName#"></div>
  <div id="Valeur"></div>
<br>

<input id="write#id#" type="range" class="value slider#id#" min="#minValue#" max="#maxValue#" value="#state#">
  <span id="texte#id#" class="value#uid# sliderValue"></span> 
  
  
<style>
  
  html, body {
  height: 100%;
}

body {
  display: flex;
  justify-content: space-around;
  margin: 0;
}
   

.slider#id# {
   -webkit-appearance: none;
  border: solid 4em transparent;
  align-self: center;
  padding: 0;
  width: 19.5em;
  height: 3.375em;
  border-radius: 0.25em;
  background-origin: border-box;
  
  font-size: 1em;
  cursor: pointer;
   
}



 .slider#id#, .slider#id#::-webkit-slider-runnable-track, .slider#id#::-webkit-slider-thumb {
  -webkit-appearance: none;
  /* slider components */
}
  
  
.slider#id#::-webkit-slider-runnable-track {
   -webkit-appearance: none;
  display:	inline-block;
  box-sizing: border-box;
  border: none;
  padding: 0.375em;
  width: 19.5em;
  height: 2.25em;
  border-radius: 1.125em;
 background: linear-gradient(to right,  #00FF00 0%,  #00FF00 50%, #3a3d42 50%, #3a3d42 100%);
  -webkit-transition: .2s;
    transition: opacity .2s;
  box-shadow: inset 0 -1px 1px #fff, inset 0 0.5em 0.5em #c4c4c4, inset 0 0 0 0.375em #efefef, inset 0 1px 0.125em 0.375em black, inset 0 0 0 1px #eee;

 
}



.slider#id#::-webkit-slider-thumb {
  margin-top: -0.375em;
  box-sizing: border-box;
  border: none;
  padding: 0.375em;
  width: 2.25em;
  height: 2.25em;
  border-radius: 50%;
  box-shadow: 0 0.375em 0.5em -0.125em #808080, inset 0 -0.25em 0.5em -0.125em #bbb;
  background: linear-gradient(#c5c5c5, #efefef) content-box, linear-gradient(#fdfdfd, #c4c4c4) border-box;
  cursor: ew-resize;
}
  
  
 
 .slider#id#:focus {
  outline: none;
  box-shadow: 0 0.125em 0.125em #fff;
  background-color: rgba(255, 255, 255, 0.32);
}

  
  
   </style>
  
  
  <script>
    
  
    
  </script>
   
   <script>
     var x;
   		var Value;
     jeedom.cmd.update['#id#'] = function(_options){
      		texte#id#.innerHTML = _options.display_value;
    		$('#write#id#').val(_options.display_value); 
       
       
       
      		Value = this.value; 
      		Valeur.innerHTML = Value;
          write#id#.style.background = 'linear-gradient(to right, #00FF00 0%, #00FF00 '+write#id#.value +'%, #3a3d42 ' + write#id#.value + '%, #3a3d42 100%)' /* barre progression   */
		
           
        }
   
     
  
var slider = document.getElementById("write#id#");
     var output = document.getElementById("texte#id#");
output.innerHTML = slider.value;

slider.oninput = function() {
  output.innerHTML = this.value;
}
     
	
    	write#id#.oninput = function() {
      		Value = this.value; 
      		Valeur.innerHTML = Value;
           this.style.background = 'linear-gradient(to right, #00FF00 0%, #00FF00 '+this.value +'%, #3a3d42 ' + this.value + '%, #3a3d42 100%)' /* barre progression   */
		}
     
slider.onchange = function() {
 
   jeedom.cmd.execute({id: '#id#', value: {slider: Value}});
    
  
}	
     
    </script>
</div>

et voici le résultat pour le moment:

Merci à tous.