3

tengo un jsfiddle.

https://jsfiddle.net/nacs2025/44mxnzbu/

Aquí hay un intput tag:

              <div class="marging">
                     <input id="ex19" type="text" data-provide="slider"
                     data-slider-ticks = "[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]" 
            data-slider-ticks-labels = '["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]' />
                  </div>

                  <br/>
                  <br/>
                  <button id="myButton">
                  OKAY
                  </button>

Cuando le dé clic al botón quiero agregar los siguientes atributos y tambien actualizar los dos que ya están:

'data-slider-min':"1",
'data-slider-max':"3",
'data-slider-step':"1",
'data-slider-value':"3",
'data-slider-tooltip':"hide"

Tengo este javascript que funciona parcialmente.

                var spanishLabels = ["Enero", "Febrero", "Marzo"];
                var num = [1,2,3];

                $('#myButton').click(function() {



                  $('.data-slider-ticks-labels').each(function(index) {
                    $(this).text(spanishLabels[index]);
                  });    
                   $('.data-slider-ticks').each(function(index) {
                    $(this).text(num[index]);
                  });  

                   $( "#ex19" ).attr({  
                    'data-slider-min':"1",
                    'data-slider-max':"3",
                    'data-slider-step':"1",
                    'data-slider-value':"3",
                    'data-slider-tooltip':"hide"
                });


                });

Que estoy haciendo mal, porqué el JS no me funciona del todo bien.

1
  • Define "funciona parcialmente"
    – Alvaro Montoro
    Commented el 4 oct. 2016 a las 23:56

1 respuesta 1

2

Estuve revisando con detalle la documentación de Bootstrap Slider y encontré el método setAttribute() que permite (en teoría) cambiar los parámetros del slider, así como los métodos refresh() y relayout() que de cierta forma redibujan el slider, sin embargo no me funcionaba bien (ver Slider 2 en el ejemplo a continuación).

Revisé con detalle el código de Bootstrap slider que se encuentra en Github y después de analizarlo y probarlo, noté que los ticks y ticks_labels, así como el tooltip son generados solo cuando se crea el slider y nunca son modificados por los métodos refresh o relayout.

En otras palabras la única forma que encontré para modificar los ticks y los ticks_labels fue destruyendo y recreando el slider, lo cual no me parece lógico (o hay algo que no entendí).

// Slider 1
var mySlider = new Slider('#ex19', {});

$('#myButton').click(function() {
 
  mySlider.destroy();
  
  new Slider('#ex19', {min: 1, max: 3, step: 1, value: 3, tooltip: 'hide', ticks_labels: ["Eneros", "Febreros", "Marzos"], ticks: [1, 2, 3]});
  
});


// Slider 2
var mySlider2 = new Slider('#ex20', {});

$('#myButton2').click(function() {
  // No actualiza los ticks ni los labels ni el tooltip
  mySlider2.setAttribute('min', 1)
          .setAttribute('max', 3)
          .setAttribute('step', 1)
          .setAttribute('value', 3)
          .setAttribute('tooltip', 'hide')
          .setAttribute('ticks_labels', ["Eneros", "Febreros", "Marzos"])
          .setAttribute('ticks', [1, 2, 3])
          .relayout();
});
.slider {
  margin-top: 30px;
  width: 100% !important;  
}

.marging {
  margin-right: 80px;
  margin-left:50px;  
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.2.0/css/bootstrap-slider.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/9.2.0/bootstrap-slider.min.js"></script>

      <div class="marging">
        Slider 1
             <input id="ex19" type="text"
             data-slider-ticks = "[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]" 
    data-slider-ticks-labels = '["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]' />
          </div>
          <br/>
          <br/>
          <button id="myButton">
          Cambiar slider 1
          </button>
<hr>
      <div class="marging">
        Slider 2
             <input id="ex20" type="text"
             data-slider-ticks = "[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]" 
    data-slider-ticks-labels = '["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"]' />
          </div>
          <br/>
          <br/>
          <button id="myButton2">
          Cambiar slider 2
          </button>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.