Slider CSS sur le dashboard

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 :
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.

Salut @wojc,

…Les 2 réponses au-dessus sont à prendre à la plaisanterie je pense car plutôt comiques…

Ça m’intéresse du coup je vais essayer d’y regarder ce soir plus en détail pour adapter le code du widget core que tu as repris pour un usage personnalisé …au plus tard ce week-end où je vais avoir du temps libre. Je crois même que j’ai déjà un widget identique compatible V3 sur ma VM de DEV faut que je vérifie

comique oui et non, car balancer un style * qui va s’appliquer à tout les éléments (déjà en perf c’est à éviter), et un autre sur le body :roll_eyes:

oui le général (*) et celui du body doivent dégager c’est sûr et le reste est à adapter car pour le moment c’est un mélange sauvage entre un code CSS trouvé sur le net et le script du widget core… j’avoues j’ai été un peu mauvais dans ma réponse :crazy_face:

1 J'aime

Merci beaucoup pour vos réponses.
J’ai hâte de pouvoir adapter mon slider à ma sauce…
Je patiente…
Merci pour le coup de pouce.

la 2eme réponse méritait :slight_smile:

On vanne @eddie, mais la place du style n’a aucune importance, avant, après,…

Mince… J’ai encore loupé l’occasion de fermer ma g… :joy:

1 J'aime

Salut,

J’ai pas mal avancé sur le widget curseur perso, il ne me reste plus qu’à récupérer la valeur du slider pour l’envoyer à jeedom malheureusement je n’ai pas eu autant de temps libre que j’aurais espéré ce week-end mais je ne t’oublies pas rassures-toi !

Bonne soirée @+

Merci Salvialf,
je patiente. Merci de prendre de ton temps pour moi…

Salut,
des petites nouvelles Salvialf ?
Merci.