Bonjour à tous,
j’essaye de modifier le code d’un slider afin de lui ajouter des formes et des couleurs perso, mais je n’y arrive pas, rien ne change.
J’ai insérer la balise pour ajouter le code CSS, mais rien ni fait.
Voici le code que j’ai inséré :
<div class="cmd cmd-widget" data-type="action" data-subtype="slider" data-cmd_id="#id#" data-cmd_uid="#uid#" data-version="#version#" data-eqLogic_id="#eqLogic_id#">
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div>
<div class="range">
<input type="range">
<div class="slider" value="#state#">
<span class="value#uid# sliderValue"></span>
</div>
</div>
<style>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #2b2e31;
}
.slider {
width: 200px;
margin: 100px auto;
}
input[type="range"] {
-webkit-appearance: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
width: 100%;
height: 20px;
margin: 0;
border: none;
padding: 1px 2px;
border-radius: 14px;
background: #232528;
box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;
-webkit-box-shadow: inset 0 1px 0 0 #0d0e0f, inset 0 -1px 0 0 #3a3d42;
outline: none; /* no focus outline */
}
input[type="range"]::-moz-range-track {
border: inherit;
background: #FFFFFF;
}
input[type="range"]::-ms-track {
border: inherit;
color: transparent; /* don't drawn vertical reference line */
background: #FFFFFF;
}
input[type="range"]::-ms-fill-lower,
input[type="range"]::-ms-fill-upper {
background: #FFFFFF;
}
input[type="range"]::-ms-tooltip {
display: none;
}
/* thumb */
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 40px;
height: 18px;
border: none;
border-radius: 12px;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #529de1), color-stop(100%, #245e8f)); /* android <= 2.2 */
background-image: -webkit-linear-gradient(top , #529de1 0, #245e8f 100%); /* older mobile safari and android > 2.2 */;
background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */
}
input[type="range"]::-moz-range-thumb {
width: 40px;
height: 18px;
border: none;
border-radius: 12px;
background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */
}
input[type="range"]::-ms-thumb {
width: 40px;
height: 18px;
border-radius: 12px;
border: 0;
background-image: linear-gradient(to bottom, #529de1 0, #245e8f 100%); /* W3C */
}
</style>
<script>
jeedom.cmd.update['#id#'] = function(_options){
$(".cmd[data-cmd_id=#id#] .slider").slider({
min: ('#minValue#' == '') ? 0 : parseInt('#minValue#'),
max: ('#maxValue#' == '') ? 100 : parseInt('#maxValue#'),
value: ('#state#' == '') ? 0 : parseInt(_options.display_value),
slide: function(event, ui) {
$(".value#uid#").show()
$(".value#uid#").html(ui.value);
}
})
}
jeedom.cmd.update['#id#']({display_value:'#state#'});
$(".cmd[data-cmd_uid=#uid#] .slider").on('slidestop', function (event,ui) {
jeedom.cmd.execute({id: '#id#', value: {slider: ui.value}});
$(".value#uid#").hide();
});
</script>
</div>
et voici le résultat en image :
J’ai deux slider: Le premier qui est celui que j’aimerais garder mais qui n’actionne pas mon rideau.
Le deuxième qui lui est opérationnel.
Si une âme charitable voulait bien me donner un coup de pouce pour que mon slider avec le code CSS fonctionne.
Merci beaucoup.
