jQuery UI Slider (configuración mediante programación)

Question

Me gustaría modificar los controles deslizantes sobre la marcha. Intenté hacerlo usando

$("#slider").slider("option", "values", [50,80]); 

Esta llamada establecerá los valores, pero el elemento no actualizará las posiciones del control deslizante. Llamando a

$("#slider").trigger('change'); 

tampoco ayuda.

¿Existe alguna otra forma mejor de modificar el valor Y la posición del control deslizante?

Answer 1

Depende de si desea cambiar los controles deslizantes en el rango actual o cambiar el rango de los controles deslizantes.

Si se trata de los valores en la gama actual que desea cambiar, entonces el método .slider() es la que se debe utilizar, pero la sintaxis es un poco diferente de lo habitual:

$("#slider").slider('value',50); 

o si tiene un control deslizante con dos asas sería:

$("#slider").slider('values',0,50); // sets first handle (index 0) to 50 
$("#slider").slider('values',1,80); // sets second handle (index 1) to 80 

Si es el rango que desea cambiar sería:

$("#slider").slider('option',{min: 0, max: 500}); 

Answer 2

Es posible activar manualmente eventos como éste:

Aplicar el comportamiento deslizante al elemento

var s = $('#slider').slider(); 

...

Establecer el valor del control deslizante

s.slider('value',10); 

Gatillo la diapositiva evento, pasando un objeto ui

s.trigger('slide',{ ui: $('.ui-slider-handle', s), value: 10 }); 

Answer 3

Para mí esto desencadena perfectamente evento de diapositivas en la interfaz de usuario deslizante:

hs=$('#height_slider').slider(); 
hs.slider('option', 'value',h); 
hs.slider('option','slide') 
     .call(hs,null,{ handle: $('.ui-slider-handle', hs), value: h }); 

No se olvide de establecer el valor por hs.slider('option', 'value',h); antes de que el gatillo. El controlador deslizante Else no estará sincronizado con el valor.

Una cosa a tener en cuenta aquí es que h es índice/posición (no valor) en caso de que esté utilizando html select.

Answer 4

Ninguna de las respuestas anteriores funcionó para mí, tal vez se basaron en una versión anterior del marco.

Todo lo que tenía que hacer era establecer el valor del control subyacente, a continuación, llamar al método de actualización, de la siguiente manera:

$("#slider").val(50); 
$("#slider").slider("refresh"); 

Answer 5

respuesta del Mal fue el único que trabajó para mí (tal vez jQueryUI ha cambiado) , aquí hay una variante para tratar con un rango:

$("#slider-range").slider('values',0,lowerValue); 
$("#slider-range").slider('values',1,upperValue); 
$("#slider-range").slider("refresh"); 

Answer 6

Quería actualizar el control deslizante y la caja de entrada.Para mí siguiente está trabajando

a.slider('value',1520); 
$("#labelAID").val(1520); 

donde a es objeto de la siguiente manera.

var a= $("<div id='slider' style='width:200px;margin-left:20px;'></div>").insertAfter("#labelAID").slider({ 
      min: 0, 
      max: 2000, 
      range: "min", 
      value: 111, 
      slide: function(event, ui) { 

       $("#labelAID").val(ui.value ); 
      } 
     }); 

     $("#labelAID").keyup(function() { 
      a.slider("value",$("#labelAID").val() ); 
     }); 

Answer 7

He aquí la versión de trabajo:

var newVal = 10; 
var slider = $('#slider');   
var s = $(slider); 
$(slider).val(newVal); 
$(slider).slider('refresh'); 

Answer 8

Si necesita cambiar valores del regulador de varios de entrada, lo utilizan:

html:

<input type="text" id="amount"> 
<input type="text" id="amount2"> 
<div id="slider-range"></div> 

JS:

$("#slider-range").slider({ 
    range: true, 
    min: 0, 
    max: 217, 
    values: [ 0, 217 ], 
    slide: function(event, ui) { 
     $("#amount").val(ui.values[ 0 ]); 
     $("#amount2").val(ui.values[ 1 ]); 
    } 
    }); 

$("#amount").change(function() { 
    $("#slider-range").slider('values',0,$(this).val()); 
}); 
$("#amount2").change(function() { 
    $("#slider-range").slider('values',1,$(this).val()); 
}); 

https://jsfiddle.net/brhuman/uvx6pdc1/1/

Answer 9

Una parte de la solución @gaurav trabajó para jQuery 2.1.3 y 1.10.2 jQuery UI con múltiples controles deslizantes. Mi proyecto utiliza cuatro controles deslizantes de rango para filtrar datos con this filter.js plugin. Otras soluciones estaban restableciendo los controles deslizantes a sus puntos finales iniciales, pero aparentemente no estaban activando un evento que filter.js entendió. Así que aquí es cómo enlazar en los controles deslizantes:

$("yourSliderSelection").each (function() { 
    var hs = $(this); 
    var options = $(this).slider('option'); 

    //reset the ui 
    $(this).slider('values', [ options.min, options.max ]); 

    //refresh/trigger event so that filter.js can reset handling the data 
    hs.slider('option', 'slide').call(
     hs, 
     null, 
     { 
      handle: $('.ui-slider-handle', hs), 
      values: [options.min, options.max] 
     } 
    ); 

}); 

El código hs.slider() restablece los datos, pero no la interfaz de usuario en mi escenario. Espero que esto ayude a otros.