Problème de Slider en design avec taille de widget augmentée

Utilisation du core de Jeedom
1

Bonjour,

Alors pour faire simple, j’ai exactement le même souci que dans le post suivant de @Vidou :
https://community.jeedom.com/t/widget-type-slider-dans-design-en-taille-x2/10036/4
A part changer de widget comme proposé par @Salvialf, est-ce que quelqu’un a une solution?

J’ai le cas que ce soit avec un slider custom basé sur le standard:


<div class="cmd cmd-widget" data-type="action" data-subtype="slider" data-template="default" 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="content-xs">
    <div class="slider" value="#state#" style="width:#ma_largeur#px;">
      <span class="value#uid# sliderValue"></span>
    </div>
  </div>

  <script>
    $(".cmd[data-cmd_uid=#uid#] .slider.slider-horizontal").css('z-index',1);
    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>

Ou que ce soit avec le plugin squeezebox:

<center>
    <div class="volume" style="width: 80%;display:inline-block;" value="#volume#"% ></div>
  </center>
<script>
		$(".eqLogic[data-eqLogic_id=#id#] .volume").slider({
			min: 0,
			max: 100,
			range : "min",
			value: ('#volume#' == '') ? 0 : parseInt('#volume#')
		});
        $(".eqLogic[data-eqLogic_id=#id#] .slider.slider-horizontal").css('z-index',1);
		$(".eqLogic[data-eqLogic_id=#id#] .volume").on('slidestop', function (event,ui) {
			jeedom.cmd.execute({id: '#volume_id#', value: {slider: ui.value}});
		});
</script>

Bonne journée.
Dapolux

1 « J'aime »
2

Personne n’a une idée?

3

Tu a essayé en appliquant le facteur de zoom à la valeur renvoyée par le slider ?

4

Merci pour ta réponse.
J’ai essayé 2,3 trucs, mais pas sur que je m’y prenne correctement.

Déjà je ne sais pas comment récupérer la valeur du zoom (enfin, du « transform »). Pour mes tests j’ai mis en dur la valeur de 1.5.

J’imagine que ce n’est pas au niveau de l’html qu’il faut intervenir, mais dans le JS.

J’ai tenté par exemple ceci:

		$(".eqLogic[data-eqLogic_id=#id#] .volume").slider({
			min: 0,
			max: 100,
			range : "min",
			value: ('#volume#' == '') ? 0 : parseInt('#volume#') / 1.5
		});
        $(".eqLogic[data-eqLogic_id=#id#] .slider.slider-horizontal").css('z-index',1);
		$(".eqLogic[data-eqLogic_id=#id#] .volume").on('slidestop', function (event,ui) {
			jeedom.cmd.execute({id: '#volume_id#', value: {slider: ui.value / 1.5}});
		});

Mais en vain.

5

Un petit up

6

Bonjour,

Après avoir galéré un peu, voici la méthode que j’ai appliqué.

  • Re transformation du DIV du slider à l’échelle initiale, en appliquant l’inverse du coef.
  • Augmentation de la largeur du DIV concerné (proportionnellement au coef.)
  • Transformation de l’icone qui slide

Voici ce que ça donne dans le code:

var widget_scale = 1 / $('.eqLogic[data-eqLogic_uid=#uid#]').attr("data-zoom");
var vol_width = $('.eqLogic[data-eqLogic_uid=#uid#]').width() / widget_scale *0.9; // 0.9 ==> 90% de la largeur du div
   
$(".eqLogic[data-eqLogic_id=#id#] .volume").css('transform', 'scale('+ widget_scale + ')');
$(".eqLogic[data-eqLogic_id=#id#] .volume").css('transform-origin', '7%'); // 7% pour centrer dans mon widget perso
$(".eqLogic[data-eqLogic_id=#id#] .volume").css('width', vol_width + 'px');
$(".eqLogic[data-eqLogic_id=#id#] .volume .ui-slider-handle").css('transform', 'scale('+ 1 / widget_scale + ')');

Biensur c’est à adapter au cas par cas. Pour ma part c’est appliqué a une slider de classe .volume.

C’est un peu bourrin, mais c’est la seule solution que j’ai trouvé pour le moment.
Je partage au cas ou ça en aide certains.