jquery - bootstrap - slider js

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

Question

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

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

Esta llamada establecerá los valores, pero el elemento no actualizará las posiciones del control deslizante. Vocación

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

tampoco ayuda.

¿Hay otra / mejor manera de modificar el valor Y la posición del control deslizante?

Answer 1

Aquí está la versión de trabajo:

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

Answer 2

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

Si son los valores en el rango actual que desea cambiar, entonces el método .slider () es el que debe usar, pero la sintaxis es un poco diferente de la que utilizó:

$("#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 3

Es posible activar eventos como este manualmente:

Aplicar el comportamiento del control deslizante al elemento

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

...

Establecer el valor del control deslizante

s.slider(''value'',10);

Dispare el evento de diapositiva, pasando un objeto ui

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

Answer 4

La respuesta de Mal fue la única que funcionó 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 5

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, luego llamar al método de actualización, como se muestra a continuación:

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

Answer 6

Para mí, esto desencadena perfectamente el evento de deslizamiento en UI Slider:

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

No olvides establecer el valor por hs.slider(''option'', ''value'',h); antes del disparador 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 7

Quería actualizar el control deslizante y la casilla de entrada. Para mí, lo siguiente es trabajar

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

donde a es a objeto como siguiente.

 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 8

Si necesita cambiar los valores del control deslizante de varias entradas, úselo:

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 funcionó para jQuery 2.1.3 y JQuery UI 1.10.2 con múltiples controles deslizantes. Mi proyecto utiliza cuatro controles deslizantes de rango para filtrar datos con este plugin filter.js . 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 hice un bucle a través de 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 IU en mi escenario. Espero que esto ayude a otros.