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 :
Voici le slider lors du rafraîchissement de la page :
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…
