Slider barre de défilement

Tags: #<Tag:0x00007f593393c590>

Bonjour à tous.
J’ai créé un widget slider personnalisé, mais je bloque sur un dernier problème.
Lorsque je glisse le curseur du slider à droite ou à gauche, la barre de défilement suit bien le curseur, mais lorsque la page se rafraîchit ou se met à jour, la barre du curseur reste sur sa valeur par défaut, c’est à dire au milieu.
Si quelqu’un peu me donner un coup de pouce. Merci.

Voici le slider qui fonctionne bien lorsque je le fais glisser le curseur :
Curseur1

Voici le slider lors du rafraîchissement de la page :
Curseur2

Voici mon code:

<div class="cmd cmd-widget" data-type="action" data-subtype="slider" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#">
  
  <div class="title #hide_name#">
  
        <div class="cmdName" style="#hideCmdName#"></div>
    </div>
    	
   <div id="Valeur#id#" style="display: none;"></div> <!--ne pas afficher la valeur du slider -->
    
  
  <div class="wrapper">
      
<div class="rangewrapper horizontal">
  <div class="sliderfill">
  <input class="customrange" id="write#id#" type="range" min="#minValue#" max="#maxValue#"  data-idx="1">
    
    
    
  </div>
  <div class="sliderthumb"></div>
  <div class="slidervalue" id="slidervalue1"></div>
</div>
  
 
      
   <script>
  
            
   		var Value;
     jeedom.cmd.update['#id#'] = function(_options){
      	
            Valeur#id#.innerHTML = _options.display_value;
    		$('#write#id#').val(_options.display_value);
        	
        }
            
  
	var customrange = document.getElementById("write#id#");
    var slidervalue = document.getElementById("Valeur#id#");
	slidervalue.innerHTML = customrange.value;

	customrange.oninput = function() {
 	slidervalue.innerHTML = this.value;
               
      
      
}
     
	
    	write#id#.oninput = function() {
      		Value = this.value; 
      		Valeur#id#.innerHTML = Value;         
                  
      
		}
     
        
        
     var customrange = document.getElementById("write#id#");  
      var slidervalue = document.getElementById("Valeur#id#");
      slidervalue.innerHTML = customrange.value;
 	  
      customrange.onmousemove = function() {
  	  slidervalue.innerHTML = this.value; 
   }     
     
     
      var customrange = document.getElementById("write#id#");  
      var slidervalue = document.getElementById("Valeur#id#");
      slidervalue.innerHTML = customrange.value;

      customrange.onchange = function() {
      slidervalue.innerHTML = this.value;
                  
 
   jeedom.cmd.execute({id: '#id#', value: {slider: Value}});
    
  
}

   	
   
   	jeedom.cmd.update['#id#']({display_value:'#state#',valueDate:'#valueDate#',collectDate:'#collectDate#',alertLevel:'#alertLevel#'});
    </script>

   
 
  
<style>

 .customrange {

	 height: 0px;
	 border-radius: 0.5em;
	 background: transparent;
   	 font-size: 1em;
	 cursor: pointer;
}
 .customrange, .customrange::-webkit-slider-runnable-track, .customrange::-webkit-slider-thumb {
	 -webkit-appearance: none;
}
 .customrange::-webkit-slider-runnable-track {
	 box-sizing: border-box;
	 margin: 0 0.75em;
	 border: solid 1px #000;
	 width: 23em;
	 height: 1.5em;
	 box-shadow: 0 1px 1px rgba(119, 119, 119, .7), inset 0 0.125em 0.25em #0c0c0b, inset 0 0 0 0.375em #2a2a29, inset 0 0 0 0.5em #000;
	 border-radius: 0.75em;
	 background: #000;
}



 .customrange::-webkit-slider-thumb {
	 box-sizing: border-box;
	 border: solid 0.1875em rgba(192, 192, 192, .2);
	 width: 2em;
	 height: 2em;
	 border-radius: 50%;
	 box-shadow: 0 0.5em 0.25em rgba(17, 17, 17, .87);
	 background: radial-gradient(at 0 50%#333, rgba(51, 51, 51, 0) 70%) no-repeat content-box, radial-gradient(at 100% 100%#333, rgba(51, 51, 51, 0) 70%) no-repeat 100% 86% content-box, linear-gradient(rgba(51, 51, 51, 0) 39%, rgba(51, 51, 51, .32), rgba(51, 51, 51, 0) 61%) no-repeat, linear-gradient(45deg, rgba(51, 51, 51, 0) 32%, rgba(51, 51, 51, .32), rgba(51, 51, 51, 0) 68%) no-repeat 100% 100%, radial-gradient(at 0 100%#333, rgba(51, 51, 51, 0) 70%) no-repeat border-box, radial-gradient(circle at 50% 100%, #333, rgba(51, 51, 51, 0) 71%) no-repeat 50% 100% border-box;
	 background-size: 50% 100%, 50% 50%, 50% 100%, 50% 50%, 100% 100%, 100% 50%;
	 background-color: #ccc;
}

 .customrange:nth-of-type(1) {
	 color: #e34f1e;
}
 .customrange:nth-of-type(1)::-webkit-slider-runnable-track {
	 background: linear-gradient(#000, #000) no-repeat, linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .25) 75%), linear-gradient(45deg, rgba(0, 0, 0, .25) 25%, transparent 25%, transparent 75%, rgba(0, 0, 0, .25) 75%), linear-gradient(90deg, #dcb004, #e34f1e);
	 background-position: 100% 0, 0 0, 0.1875em 0.1875em;
	 background-size: 50% 100%, 0.375em 0.375em, 0.375em 0.375em, 100% 100%;
}
 
 .customrange:nth-of-type(1)::-webkit-slider-thumb {
	 margin-top: -0.25em;
	 filter: drop-shadow(0 0.5em 0.25em rgba(17, 17, 17, .87));
	 clip-path: polygon(, 050%37.5%*cos(0deg)0 037.5%37.5%*sin(0deg)0, 050%31.875%*cos(18deg)0 037.5%31.875%*sin(18deg)0, 050%37.5%*cos(36deg)0 037.5%37.5%*sin(36deg)0, 050%31.875%*cos(54deg)0 037.5%31.875%*sin(54deg)0, 050%37.5%*cos(72deg)0 037.5%37.5%*sin(72deg)0, 050%31.875%*cos(90deg)0 037.5%31.875%*sin(90deg)0, 050%37.5%*cos(108deg)0 037.5%37.5%*sin(108deg)0, 050%31.875%*cos(126deg)0 037.5%31.875%*sin(126deg)0, 050%37.5%*cos(144deg)0 037.5%37.5%*sin(144deg)0, 050%31.875%*cos(162deg)0 037.5%31.875%*sin(162deg)0, 050%37.5%*cos(180deg)0 037.5%37.5%*sin(180deg)0, 050%31.875%*cos(198deg)0 037.5%31.875%*sin(198deg)0, 050%37.5%*cos(216deg)0 037.5%37.5%*sin(216deg)0, 050%31.875%*cos(234deg)0 037.5%31.875%*sin(234deg)0, 050%37.5%*cos(252deg)0 037.5%37.5%*sin(252deg)0, 050%31.875%*cos(270deg)0 037.5%31.875%*sin(270deg)0, 050%37.5%*cos(288deg)0 037.5%37.5%*sin(288deg)0, 050%31.875%*cos(306deg)0 037.5%31.875%*sin(306deg)0, 050%37.5%*cos(324deg)0 037.5%37.5%*sin(324deg)0, 050%31.875%*cos(342deg)0 037.5%31.875%*sin(342deg)0);
}
 

 .customrange:focus {
	 outline: none;
	
}
 

   </style>

<script>

        
var s = document.createElement('style'), 
    r = document.querySelectorAll('input[type=range]'), 
    prefs = ['webkit-slider-runnable'], 
    styles = [], 
    l = prefs.length
    n = r.length;

document.body.appendChild(s);

var getTrackStyleStr = function(el) {
  var str = '', 
      j = el.dataset.idx, 
      min = el.min || 0, 
      perc = (el.max) ? ~~(100*(el.value - min)/(el.max - min)) : el.value, 
      _size = getComputedStyle(document.body).backgroundSize.split(',')[0], 
      val = (100 - perc) + '% 100%,' + _size + ',' + _size + ',100% 100%';
      
  for(var i = 0; i < l; i++) {
    str += 'input[type=range]:nth-of-type(' + j + ')::-' + prefs[i] + '-track{background-size:' + val + '}'
  }
    
  return str;
};

for(var i = 0; i < n; i++) {
  styles.push('');
  
  r[i].addEventListener('input', function() {    
    styles[this.dataset.idx] = getTrackStyleStr(this);
    s.textContent = styles.join('');
  }, false);
}
      
</script>
    
  
    

</div>

Merci à tous…