Bonjour,
Je suis entrain de créer mes designs et il me manque un widget de type slider (luminosité 0-100) personnalisable.
J’ai réussi à m’en sortir avec le switch mais la je sèche.
J’ai un slider fonctionnel sur un éditeur en HTML, CSS et JS mais c’est pour le rendre compatible sur Jeedom qui me pose problème.
Je pense que le sujet pourrait intéresser plusieurs personnes car j’ai vu pas mal de demande sur le sujet, qui n’ont pas abouties, en cherchent.
Je suis en V4 stable.
Si quelqu’un pouvait m’aider ce serait gentil.
Tu veux personnaliser quoi ?
Les bornes min et maxi sont déjà personnalisables.
L’apparence du slider,
j’aimerais qu’il ressemble plutôt à ça:
Bonjour,
en partageant les fichiers sources, se serait plus facile.
je les deposes comme un messages ?
1 « J'aime »
tu copie le code dans une balise préformatté
ou
Tu ajoute l’extension .txt et tu pourra les déposés directement dans un message.
2 « J'aime »
<html>
<head>
</head>
<body class="py-5">
<div class="neumorphic-slider" onselectstart="return false" style="margin-top: 100px;">
<div class="neumorphic-slider__back"></div>
<div class="neumorphic-slider__line"></div>
<div class="neumorphic-slider__thumb"></div>
<div class="neumorphic-slider__popover">40%</div>
</div>
</div>
<div class="my-5 row justify-content-center">
</div>
</div>
</body>
</html>
:root {
--value: 0%;
--back-color: #363845;
}
body {
background-color: transparent;
text-align: center;
justify-content: center;
}
.neumorphic-progress, .neumorphic-slider {
width: 260px;
margin: auto;
}
.neumorphic-progress__back, .neumorphic-slider__back {
height: 24px;
background-color: var(--back-color);
border-radius: 12px;
border: 2px solid #131417;
box-shadow:
/*bas droite ex*/ 5px 5px 10px 5px #131417,
/*haut gauche ex*/ -5px -5px 10px 5px #4D4D5D,
/*contour fin*/ inset 0px 0px 4px #131417,
/*haut gauche in*/ inset 5px 5px 10px 5px #131417,
/*bas droite in*/ inset -5px -5px 10px 5px #4D4D5D,
0px 0px 4px #4D4D5D !important;
}
.neumorphic-slider {
width: 240px;
}
.neumorphic-slider__back {
width: calc(100% + 20px);
margin-left: -10px;
}
.neumorphic-slider {
position: relative;
}
/*slider orange*/
.neumorphic-slider__line {
height: 16px;
background-color: #F0600A;
margin-top: -20px;
margin-left: -6px;
border-radius: 8px;
opacity: 1;
width: calc(var(--value) + 4px);
box-shadow:
/*haut gauche in*/ inset 7px 7px 10px 5px #EC5901,
/*bas droite in*/ inset -7px -7px 10px 5px #EE9159;
}
.neumorphic-slider__thumb {
width: 20px;
height: 20px;
position: absolute;
border-radius: 50%;
background-color: #C3C6CB;
left: var(--value);
top: 2px;
margin-left: -10px;
cursor: pointer;
box-shadow: 2px 2px 10px #131417, inset -2px -2px 10px #131417;
}
.neumorphic-slider__popover {
position: absolute;
background-color: transparent;
left: var(--value);
width: 60px;
height: 40px;
top: -40px;
margin-left: -25px;
font-weight: bolder;
color: #F0600A;
text-shadow: 4px 4px 3px #131417;
padding: 8px 0;
}
$('.neumorphic-slider__thumb').on('mousedown', function(){
$(document).on('mousemove.mm', function(e){
var new_value = 0;
if (e.clientX < $('.neumorphic-slider').offset().left) {
new_value = '0%';
} else if (e.clientX > $('.neumorphic-slider').offset().left + $('.neumorphic-slider').width() - 10) {
new_value = '100%';
} else {
new_value = ((e.clientX - $('.neumorphic-slider').offset().left) / ($('.neumorphic-slider').width() - 10) * 100).toFixed(0) + '%';
}
document.documentElement.style.setProperty('--value', new_value);
$('.neumorphic-slider__popover').text(new_value);
});
$(document).on('mouseup.mu', function(){
$(document).off('mousemove.mm');
$('.neumorphic-slider__thumb').off('mouseup.mu');
});
});
2 « J'aime »
Bonjour,
Voici une première passe :
<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#">
<!--
https://community.jeedom.com/t/widget-slider-luminosite-personnalisable/104062?u=phpvarious
-->
<div class="" style="text-align: right;margin: 20px;">
<div class="neumorphic-slider#id#" onselectstart="return false" style="">
<div class="neumorphic-slider__back#id#"></div>
<div class="neumorphic-slider__line#id#"></div>
<div class="neumorphic-slider__thumb#id#"></div>
<div class="neumorphic-slider__popover#id#">#state#%</div>
</div>
</div>
<template>
<div>widthSlider : Largeur du slider [Défaut : 70]</div>
</template>
<style>
:root {
--value#id#: #state#%;
--back-color#id#: #363845;
--width#id#: 70px;
}
.neumorphic-slider#id# {
margin: auto;
width: var(--width#id#);
position: relative;
}
.neumorphic-slider__back#id# {
height: 24px;
background-color: var(--back-color#id#);
border-radius: 10px;
/* border: 4px solid #f3f4f7;*/
border: 2px solid #131417;
/*box-shadow: 7px 7px 15px rgba(55, 84, 170, .15),
-7px -7px 20px rgba(255, 255, 255, 1),
inset 0px 0px 4px rgba(255, 255, 255, 0),
inset 7px 7px 15px rgba(55, 84, 170, .15),
inset -7px -7px 20px rgba(255, 255, 255, 1),
0px 0px 4px rgba(255, 255, 255, .2) !important;*/
box-shadow:
/*bas droite ex*/ 5px 5px 10px 5px #131417,
/*haut gauche ex*/ -5px -5px 10px 5px #4D4D5D,
/*contour fin*/ inset 0px 0px 4px #131417,
/*haut gauche in*/ inset 5px 5px 10px 5px #131417,
/*bas droite in*/ inset -5px -5px 10px 5px #4D4D5D,
0px 0px 4px #4D4D5D !important;
}
.neumorphic-slider__back#id# {
width: calc(100% + 20px);
margin-left: -10px;
}
/*slider orange*/
.neumorphic-slider__line#id# {
height: 16px;
/*background-color: #185BF1;*/
background-color: #F0600A;
margin-top: -20px;
margin-left: -6px;
border-radius: 8px;
opacity: 1;
width: calc(var(--value#id#) + 4px);
box-shadow:
inset 7px 7px 10px 5px #EC5901,
inset -7px -7px 10px 5px #EE9159;
}
.neumorphic-slider__thumb#id# {
/*box-shadow: 7px 7px 15px rgba(55, 84, 170, .15), 0px 0px 15px rgba(55, 84, 170, .3);*/
box-shadow: 2px 2px 10px #131417, inset -2px -2px 10px #131417;
width: 20px;
height: 20px;
position: absolute;
border-radius: 50%;
/*background-color: var(--back-color#id#);*/
background-color: #C3C6CB;
left: var(--value#id#);
top: 2px;
margin-left: -10px;
cursor: pointer;
}
.neumorphic-slider__popover#id# {
text-align: center;
position: absolute;
background-color: transparent;
left: var(--value#id#);
width: 60px;
height: 40px;
top: -40px;
margin-left: -30px;
/*box-shadow: 7px 7px 15px rgba(55, 84, 170, .15),
-7px -7px 20px rgba(255, 255, 255, 1),
0px 0px 4px rgba(255, 255, 255, .2);*/
text-shadow: 4px 4px 3px #131417;
/* color: #6D7587;*/
color: #F0600A;
padding: 8px 0;
}
</style>
<script>
if ('#widthSlider#' != '#' + 'widthSlider#') document.documentElement.style.setProperty('--width#id#', '#widthSlider#px');
$('.neumorphic-slider__thumb#id#').on('mousedown', function(){
$(document).on('mousemove.mm', function(e){
var new_value = 0
if (e.clientX < $('.neumorphic-slider#id#').offset().left) new_value = '0%'
else if (e.clientX > $('.neumorphic-slider#id#').offset().left + $('.neumorphic-slider#id#').width() - 10) new_value = '100%'
else new_value = ((e.clientX - $('.neumorphic-slider#id#').offset().left) / ($('.neumorphic-slider#id#').width() - 10) * 100).toFixed(0) + '%'
document.documentElement.style.setProperty('--value#id#', new_value)
$('.neumorphic-slider__popover#id#').text(new_value)
})
$(document).on('mouseup.mu', function(){
var value = document.documentElement.style.getPropertyValue('--value#id#').replace('%', '')
//$('.neumorphic-slider__thumb').off('mouseup.mu')
$(document).off('mousemove.mm')
$(document).off('mouseup.mu')
jeedom.cmd.execute({id: '#id#', value: {slider: value.trim()}})
})
})
jeedom.cmd.addUpdateFunction('#id#',function(_options) {
var value = document.documentElement.style.getPropertyValue('--value#id#').replace('%', '');
var new_value = _options.value;
if (new_value < 0 || new_value == '') new_value = '0';
else if (new_value > 100) new_value = '100';
if (new_value != value) {
document.documentElement.style.setProperty('--value#id#', new_value + '%');
$('.neumorphic-slider__popover#id#').text(new_value + '%');
}
});
</script>
</div>
3 « J'aime »
Bonjour Phpvarious,
un grand merci à toi pour le temps passé à m’aider.
Le widget est fonctionnel et parfait à 99%.
Très bon boulot!
J’ai juste un problème d’affichage du % qui est rogné sur le haut.
ou es que je peux recadrer le widget vers le bas ?
PS: je viens de faire plusieurs essai et du coup je me suis rendu compte que:
1: il est fonctionnel sur ordinateur mais pas sur mobil ou tablette 
2: il y a un problème d’affichage quand j’utilise le switch qui est associé:
Tu peut jouer avec le margin :
Normal c’est un widget Dashboard.
Tu peut m’en dire plus sur ce switch ? en quelle version de Jeedom es-tu ?
Edit :
Je pense que j’ai trouvé, ton switch ne doit rien renvoyer quand tu le passe a 0, du moins il envoie une valeur vide, j’ai modifié le code que j’ai envoyé pour que le widget puisse prendre en compte ce cas de figure.
Merci je vois ça demain matin car je suis d’aprem cette semaine.
Un grand merci en tout cas de ton aide 
1 « J'aime »
merci nickel.
y’a t’il beaucoup de choses à changer entre dashboard et mobile?
Tu veux parler de la commande ou du widget (switch)? Je suis en V4.3.15.
Je viens d’essayer le nouveau code et je n’est plus le problème d’affichage merci, par contre si tout est éteint et que bouge le slider > le switch ne s’allume pas mais la LED oui.
Pour l’éteindre je dois activer le switch 2 fois (allumer puis éteindre)
J’espere que je suis clair 
EDIT: si j’active le switch sans toucher au slider > la LED s’allume puis s’éteint alors que le switch reste activé, si j’éteins le switch> la LED s’allume et ainsi de suite: plus possibilité d’éteindre la LED. Le slider à 0 n’étend pas la LED.
Pour info je n’avait pas de problème avec le switch avant .
1 « J'aime »
Il va falloir que tu me partage le code du switch pour comprendre, je jetterai un oeil en fin de journée.
<div style="width:90px;min-height:32px;" class="cursor cmd cmd-widget container-fluid" data-type="action" data-cmd_id="#id#" data-cmd_uid="#uid#">
<center>
<div class="title #hide_name#">
<div class="cmdName">#name_display#</div>
</div> <label class="switch">
<input type="checkbox" id="check#id#" onchange="jeedom.cmd.execute({id: '#id#'});">
<div class="slider round"></div>
</label>
</center>
<style>
:root{
/*--Round-color: #F0600A;*/
}
/*Position du widget general*/
.cmd[data-cmd_id="#id#"] .switch {
position: relative;
display: block;
width: 59px;
height: 29px;
top: 5px;
}
.cmd[data-cmd_id="#id#"] .switch input {display:none;}
.cmd[data-cmd_id="#id#"] .slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
-webkit-transition: .4s;
transition: .4s;
background: #363845; /* fond */
/*border: 1px solid #131417;*/
box-sizing: border-box;
box-shadow: inset 3px 5px 11px #131417, inset -3px -5px 11px #4D4D5D;
border-radius: 30px;
}
.cmd[data-cmd_id="#id#"] .slider:before {
position: absolute;
content: "";
height: 25px;
width: 25px;
left: 2px;
bottom: 2px;
-webkit-transition: .4s;
transition: .4s;
}
.cmd[data-cmd_id="#id#"] input:checked + .slider:before {
-webkit-transform: translateX(30px);
-ms-transform: translateX(30px);
transform: translateX(30px);
/*background: #366AFF; boule bleu On */
background: #F0600A;
/*border: 1px solid #131417;*/
box-sizing: border-box;
box-shadow: 2px 2px 7px #F0600A, -2px -2px 7px #F0600A;
}
.cmd[data-cmd_id="#id#"] .slider.round { border-radius: 20px;}
.cmd[data-cmd_id="#id#"] .slider.round:before {
border-radius: 50%;
background: #C3C6CB; /* boule bleu Off */
box-shadow: 2px 2px 10px #131417, inset -2px -2px 10px #131417;
}
</style>
<script>
jeedom.cmd.addUpdateFunction('#id#',function(_options) {
var cmd = $('.cmd[data-cmd_id=#id#]');
testcolor = ("#couleur#" == '#'+'couleur#');
if (testcolor != true) {
$('.cmd[data-cmd_id=#id#] .slider').css({'--Round-color': '#couleur#' });
}
/* var ArrowColor1#id# = ('#ArrowColor1#' !='#'+'ArrowColor1#') ? "#ArrowColor1#":"rgb(128,128,128)";
*/
if (_options.display_value == '1' || _options.display_value == 1 || _options.display_value == '99' || _options.display_value == 99 || _options.display_value == 'on') {
document.getElementById('check#id#').checked = true;
if (jeedom.cmd.normalizeName('#name#') == 'on') {
cmd.hide();
}else{
cmd.show();
}} else {
document.getElementById('check#id#').checked = false;
if (jeedom.cmd.normalizeName('#name#') == 'off') {
cmd.hide();
}else{
cmd.show();
} } })
jeedom.cmd.refreshValue([{cmd_id :'#id#',display_value: '#state#', valueDate: '#valueDate#', collectDate: '#collectDate#', alertLevel: '#alertLevel#'}])
</script>
</div>
Le voila. Je te remercie !!
Bon bas j’ai pas le soucis que tu explique, la seule chose que je rencontre, c’est que le switch se met a off si la valeur est >1, mais sa c’est normale car c’est codé comme sa dans le widget.
Ok je regarde ça demain après-midi, je ferais des tests et je te redirais. Un grand merci pour ton aide en tous cas, c’est sympas
Bonjour Phpvarious,
J’ai essayé avec plusieurs modules et même résultat.
J’ai un switch qui fonctionne si je n’applique pas le widget sur son slider mais dès que je met le widget sur le slider ça part en live 
.
Je vais essayé d’être clair:
Quand j’active le switch avec le slider a 0% la led s’allume et le switch repasse en mode éteint (la led reste allumée)
Si je réactive le switch il se désactive direct et la led s’éteint.
Quand je bouge le slider (switch et led éteint) la led s’allume mais le switch reste éteint, à cet état si j’active le switch il rebascule direct, éteint la led et repasse le slider à 0%.
En gros le switch passe en mode bouton poussoir.
Je ne sais pas si cela viens du switch ou du slider mais en tous cas il y a un problème de compatibilité entre les 2