Comme annoncé, ce forum est passé en lecture seule au 1er janvier 2020. Désormais nous vous invitons à vous rendre sur notre nouvelle page communauté :
Image

A très bientôt !

Slider design

Cette partie est réservée à l'utilisation de l'interface web de configuration de JEEDOM
Répondre
wojc
Timide
Messages : 32
Inscription : 05 août 2018, 13:46

Slider design

Message par wojc » 08 oct. 2019, 18:57

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 <style> pour ajouter le code CSS, mais rien ni fait.

Voici le code que j'ai inséré :

Code : Tout sélectionner

<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 :
image.jpg
image.jpg (17.93 Kio) Consulté 1423 fois
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.

eeBud
Timide
Messages : 393
Inscription : 28 mars 2016, 23:22
Localisation : Nancy

Re: Slider design

Message par eeBud » 12 oct. 2019, 15:03

Salut!

Voila! C'est cadeau!
Je me disais que ça pouvait aussi m'intéresser.
Je l'ai mis à disposition sur le market en recherchant:
eeBud_Curseur_personnalisé

J'y ai inséré des notes pour que tu puisses modifier la couleur et la transparence à ton goût.

En espérant que ça ai pu t'aider! ;)
c1.png
c1.png (1.46 Kio) Consulté 1379 fois

wojc
Timide
Messages : 32
Inscription : 05 août 2018, 13:46

Re: Slider design

Message par wojc » 12 oct. 2019, 15:23

Merci beaucoup eeBud,
c'est exactement ce que je cherchais pour personnaliser mes slider.
Je vais pouvoir continuer de personnaliser mon dashboard. Trop cool!
Merci encore...

wojc
Timide
Messages : 32
Inscription : 05 août 2018, 13:46

Re: Slider design

Message par wojc » 12 oct. 2019, 19:53

eeBud a écrit :
12 oct. 2019, 15:03
Salut!

Voila! C'est cadeau!
Je me disais que ça pouvait aussi m'intéresser.
Je l'ai mis à disposition sur le market en recherchant:
eeBud_Curseur_personnalisé

J'y ai inséré des notes pour que tu puisses modifier la couleur et la transparence à ton goût.

En espérant que ça ai pu t'aider! ;)

c1.png
Salut.
Petite question supplémentaire:
Y a t'il un moyen de faire en sorte qu'une couleur, par exemple le bleu suive le curseur?
Merci.

eeBud
Timide
Messages : 393
Inscription : 28 mars 2016, 23:22
Localisation : Nancy

Re: Slider design

Message par eeBud » 12 oct. 2019, 20:32

Salut !
Je ne comprends pas trop ce que tu demandes.
Genre un halo ? Que la barre à l'arrière du slide soit bleue ?

wojc
Timide
Messages : 32
Inscription : 05 août 2018, 13:46

Re: Slider design

Message par wojc » 12 oct. 2019, 21:34

Salut.
Non, lorsque l'on fait glisser le curseur sur la gauche, le fond du slider côté gauche devient bleu et le fond côté droit garde la couleur d'origine.
Merci.

eeBud
Timide
Messages : 393
Inscription : 28 mars 2016, 23:22
Localisation : Nancy

Re: Slider design

Message par eeBud » 13 oct. 2019, 13:55

Salut!

C'est de la bidouille, mais je pense que ça répond à ce que tu demandais:
eeBud_Curseur_personnalisé1 sur le market.
c1.png
c1.png (1.57 Kio) Consulté 1335 fois

wojc
Timide
Messages : 32
Inscription : 05 août 2018, 13:46

Re: Slider design

Message par wojc » 13 oct. 2019, 15:10

Salut,
Merci beaucoup eeBud, c'est exactement ce que je cherchais.
Merci pour ta patience et ta réponse rapide.

eeBud
Timide
Messages : 393
Inscription : 28 mars 2016, 23:22
Localisation : Nancy

Re: Slider design

Message par eeBud » 13 oct. 2019, 15:44

Je me suis rendu compte qu'il y avait des modifications à faire sur les 2 widgets.
En effet:
Je n'ai pas attribué d'id aux variables. Donc, dans l'état, ils ne sont pas compatibles sur plusieurs commandes affichées en même temps.
De plus, dans l'état, ce n'est pas compatible pour les écrans tactiles.

Je ferai les modifications quand j'aurai plus de temps.

wojc
Timide
Messages : 32
Inscription : 05 août 2018, 13:46

Re: Slider design

Message par wojc » 13 oct. 2019, 15:50

Cool,
merci d'y prêter attention. Le dashboard est quand même plus jolie avec de beaux slider.
Encore merci.

wojc
Timide
Messages : 32
Inscription : 05 août 2018, 13:46

Re: Slider design

Message par wojc » 01 nov. 2019, 07:04

eeBud a écrit :
13 oct. 2019, 15:44
Je me suis rendu compte qu'il y avait des modifications à faire sur les 2 widgets.
En effet:
Je n'ai pas attribué d'id aux variables. Donc, dans l'état, ils ne sont pas compatibles sur plusieurs commandes affichées en même temps.
De plus, dans l'état, ce n'est pas compatible pour les écrans tactiles.

Je ferai les modifications quand j'aurai plus de temps.
Salut eeBud,
je sais que tu n'as pas beaucoup de temps, mais pourrais tu m'aiguiller pour attribuer les id aux variables dans ton deuxième widget.
Merci. Bon week-end.

eeBud
Timide
Messages : 393
Inscription : 28 mars 2016, 23:22
Localisation : Nancy

Re: Slider design

Message par eeBud » 15 nov. 2019, 18:16

Salut!
il faut rajouter #id# à chaque variable.

wojc
Timide
Messages : 32
Inscription : 05 août 2018, 13:46

Re: Slider design

Message par wojc » 17 nov. 2019, 18:45

Merci eeBud. Je vais essayer.

Répondre

Revenir vers « Portail web classique (Desktop) »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 1 invité