Bonjour,
Pour mon second partage, j’ai pas fait grand choses 
Je suis reparti du super boulot de @Laco puis corrigé et maintenu par @Yogui auquel j’ai apporté une touche perso.
Ici les boutons sont carrés et les couleurs du texte du bouton et du fond du bouton sont paramétrables avec les options suivantes
TxtColor pour la couleur du texte
BackgroundColor pour la couleur deu fond du bouton.
Voici un exemple de rendu :
ou
options de paramétrage :
et voici le code :
#name_display#
H+
H-
M+
M-
/******************************************************************************************************************************************************/
/******************************************* Options de personnalisation Valeur par defaut ************************************************************/
/******************************************************************************************************************************************************/
/**** Increment decrement **/ var incrementdecrement = ("#incrementdecrement#" != '#'+'incrementdecrement#') ? parseInt("#incrementdecrement#") : 1 ; //
/******************************************************************************************************************************************************/
/******************************************************************************************************************************************************/
/******************************************************************************************************************************************************/
var heure;
var minute;
var chaineHeure;
var chaineMinute;
var chaineComplete;
var Min;
var Max;
// Lit les valeurs min et max
Min =('#minValue#' == '') ? 0 : '#minValue#';
Max =('#maxValue#' == '') ? 2359: '#maxValue#';
// Assure que les valeurs increment min et max sont dans la bonne plage
if (incrementdecrement > 59 || incrementdecrement < 0 ){
console.log("Valeur incrementdecrement incorrecte ", incrementdecrement);
incrementdecrement =1;
}
if (incrementdecrement > Max ){
console.log("Valeur incrementdecrement incorrecte ", incrementdecrement);
incrementdecrement =1;
}
var Min_Heure =Math.floor(parseInt(Min) / 100);
var Min_Minute =parseInt(Min) - Min_Heure*100;
if ( Min < 0 || Min > Max || Min > 2359){
console.log("Valeur Min incorrecte ", Min);
Min =0;
}
if ( Min_Minute > 59){
console.log("Valeur Min incorrecte ", Min);
Min =Min_Heure*100 + 59;
}
var Max_Heure =Math.floor(parseInt(Max) / 100);
var Max_Minute =parseInt(Max) - Max_Heure*100;
if (Max>2359){
console.log("Valeur Max incorrecte ", Max);
Max = 2359;
}
if ( Max_Minute > 59){
console.log("Valeur Max incorrecte ", Max);
Max =Max_Heure*100 + 59;
}
//sauvegarde les valeurs
$('head').prepend('<meta name="Max_#id#" content=' +Max+ '>');
$('head').prepend('<meta name="Min_#id#" content=' +Min+ '>');
$('head').prepend('<meta name="incrementdecrement_#id#" content=' +incrementdecrement+ '>');
//masque les boutons + et - pour les heures si max <60
if (Max < 60){
$('.cmd[data-cmd_id=#id#] .bt_minusH').hide();
$('.cmd[data-cmd_id=#id#] .bt_plusH').hide();
}
//Application de la valeur Min
if (parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) < Min){
$('.cmd[data-cmd_uid=#uid#] .value').val((parseInt(Min )));
$('.cmd[data-cmd_uid=#uid#] .value').trigger('change');
}
// Identification des valeurs Heure et Minute avant modification
if (parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) >= 0) {
heure = (Max < 60)? 0 : Math.floor(parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) / 100);
minute = parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) - heure*100;
}
//sauvegarde Heures et minutes
$('head').prepend('<meta name="heure_#id#" content=' +heure+ '>');
$('head').prepend('<meta name="minute_#id#" content=' +minute+ '>');
// Modification des heures
$('.cmd[data-cmd_uid=#uid#] .bt_minusH').on('click', function () {
//relie les valeurs min et max
Max = parseInt($('meta[name="Max_#id#"]').attr('content'));
Min = parseInt($('meta[name="Min_#id#"]').attr('content'));
if (parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) >= Min+100) {
jeedom.cmd.update['#id#']({display_value:(parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) - 100)});
$('.cmd[data-cmd_uid=#uid#] .value').trigger('change');
}
});
$('.cmd[data-cmd_uid=#uid#] .bt_plusH').on('click', function () {
//relie les valeurs min et max
Max = parseInt($('meta[name="Max_#id#"]').attr('content'));
Min = parseInt($('meta[name="Min_#id#"]').attr('content'));
if (parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) <= Max-100) {
jeedom.cmd.update['#id#']({display_value:(parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) + 100)});
$('.cmd[data-cmd_uid=#uid#] .value').trigger('change');
}
});
// Modification des minutes
$('.cmd[data-cmd_uid=#uid#] .bt_minusM').on('click', function () {
//relie les valeurs min max heure minute seconde incrementdecrement
Max = parseInt($('meta[name="Max_#id#"]').attr('content'));
Min = parseInt($('meta[name="Min_#id#"]').attr('content'));
heure = parseInt($('meta[name="heure_#id#"]').attr('content'));
minute = parseInt($('meta[name="minute_#id#"]').attr('content'));
incrementdecrement = parseInt($('meta[name="incrementdecrement_#id#"]').attr('content'));
if ( minute>=incrementdecrement && (heure*100)+ minute > Min ) {
jeedom.cmd.update['#id#']({display_value:(parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) - incrementdecrement)});
$('.cmd[data-cmd_uid=#uid#] .value').trigger('change');
}
else if ( heure >=1 && (heure*100)+ minute > Min) {
jeedom.cmd.update['#id#']({display_value:(parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) - 40 - incrementdecrement)});
$('.cmd[data-cmd_uid=#uid#] .value').trigger('change');
}
});
$('.cmd[data-cmd_uid=#uid#] .bt_plusM').on('click', function () {
//relie les valeurs min max heure minute seconde incrementdecrement
Max = parseInt($('meta[name="Max_#id#"]').attr('content'));
Min = parseInt($('meta[name="Min_#id#"]').attr('content'));
heure = parseInt($('meta[name="heure_#id#"]').attr('content'));
minute = parseInt($('meta[name="minute_#id#"]').attr('content'));
incrementdecrement = parseInt($('meta[name="incrementdecrement_#id#"]').attr('content'));
if ( (minute < (60-incrementdecrement)) && (heure*100)+ minute < Max) {
jeedom.cmd.update['#id#']({display_value:(parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) + incrementdecrement)});
$('.cmd[data-cmd_uid=#uid#] .value').trigger('change');
}
else if( (heure*100)+ minute < Max ) {
jeedom.cmd.update['#id#']({display_value:(parseInt($('.cmd[data-cmd_uid=#uid#] .value').val()) + 40 + incrementdecrement)});
$('.cmd[data-cmd_uid=#uid#] .value').trigger('change');
}
});
// Commande execute
$('.cmd[data-cmd_uid=#uid#] .value').on('change', function () {
if (typeof timerHandle !== 'undefined') {
clearTimeout(timerHandle);
timerHandle = setTimeout(function() {
jeedom.cmd.execute({id: '#id#', value: {slider: $('.cmd[data-cmd_uid=#uid#] .value').val()}});
}, 1000)
} else {
timerHandle = setTimeout(function() {
jeedom.cmd.execute({id: '#id#', value: {slider: $('.cmd[data-cmd_uid=#uid#] .value').val()}});
}, 1000)
}
});
//Fonction update
jeedom.cmd.update['#id#'] = function(_options){
// Affichage des heures et des minutes sous forme de chaine de caractères
if (_options.display_value>= 0) {
// Mise à jour de la valeur
$('.cmd[data-cmd_uid=#uid#] .value').val(_options.display_value);
// Formatage de la chaine de caractères heure
heure = Math.floor(parseInt(_options.display_value) / 100);
chaineHeure = heure;
// Calcul valeur minute
minute = parseInt( _options.display_value) - heure*100;
// Formatage de la chaine de caractères minute
if (minute >= 10) {
chaineMinute = minute;
}
else {
chaineMinute = "0" + minute;
}
//Affichage au format Heure-minutes ou juste minutes
if (Max < 60){
chaineComplete = chaineMinute + " min";
}
else{
// Calcul de la chaine complète
chaineComplete = chaineHeure + "h" +chaineMinute;
}
//mise a jour de la valeure
$('#chaineComplete#id#').text(chaineComplete);
}
//Sauvegarde des valeures heure et minutes
$('head').prepend('<meta name="heure_#id#" content=' +heure+ '>');
$('head').prepend('<meta name="minute_#id#" content=' +minute+ '>');
}
jeedom.cmd.update['#id#']({display_value:'#state#'});
</script>