Me gustaría modificar los controles deslizantes en la marcha. He intentado hacerlo mediante el uso de

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

Esta convocatoria se establecen los valores, pero el elemento no actualización de las posiciones de los reguladores.
Llamar

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

no ayuda tampoco.

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

InformationsquelleAutor jAndy | 2010-05-14

12 Comentarios

  1. 137

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

    Si es que los valores en el rango de corriente que desea cambiar y, a continuación, el .control deslizante() es el método que puedes usar, pero la sintaxis es un poco diferente de lo que usted utiliza:

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

    o si usted tiene una barra de desplazamiento 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});
    • que trabajos tan lejos, pero no de ejecutar el controlador de eventos. El controlador de eventos actualizaciones de algunos span móvil. Parece que no se puede activar la diapositiva evento manualmente ?
    • he intentado tanto .control deslizante(‘valor’, 100) y .control deslizante(‘option’, ‘valor’, 100) y el regulador no se mueve. estoy equivocado en pensar que DEBE moverse? o lo hace sólo cambiar el VALOR, y tengo que actualizar o algo para VER realmente el movimiento deslizante? no quiero pedir que se repita una pregunta cuando parece que esta respuesta está tan cerca de lo que realmente necesita.
    • Si usted tiene un control deslizante de rangos que usted necesita para utilizar el índice entero (empezar de 0) de la manija de la que desea mover. Así que para mover el primer identificador (índice 0) a 50 $(«#slider»).control deslizante(‘valores’,0,50); Si desea mover el segundo control deslizante (índice 1) a 50 $(«#slider»).control deslizante(‘valores’,1,50);
    • ajuste el regulador de valores de llamar a la change controlador de eventos, no la slide controlador de eventos.
    • también puede establecer un control deslizante de rangos con una matriz así: $(«#slider»).control deslizante(‘valores’, [50,80]);
    • Lo que funcionó para mí era establecer $("#slider").slider('value', 50, 80);

  2. 15

    Para mí esta perfectamente desencadenantes de la diapositiva de eventos de la interfaz de usuario 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 olvide ajustar valor por hs.slider('option', 'value',h); antes de que el gatillo. Otra cosa regulador controlador de no estar en sintonía con valor.

    Una cosa a tener en cuenta aquí es que h es el índice o posición (no el valor) en caso de que usted está usando html select.

    • Esta solución funcionó a la perfección para mí, usar jQuery UI 1.8.24.
    • Para mí también… sólo que esta solución funcionó.. jQuery 1.8.3 y jQuery UI 1.9.2 me refiero a de @alexteg la respuesta, los valores estaban siendo configurado correctamente, pero el regulador no era de deslizamiento.
    • Una modificación de la secuencia de comandos para el control deslizante de rangos sería: $('#minPrice, #maxPrice').blur(function() { var max = parseInt($('#maxPrice').val()); var min = parseInt($('#minPrice').val()); if (min > max) return false; var hs = $("#slider-range"); hs.slider("values", 0, min); hs.slider("values", 1, max); hs.slider('option', 'slide').call(hs, null, {handle: $('.ui-slider-handle', hs), values: [min, max]}); }); Donde #minPrice y #maxPrice son dos cuadros de texto.
  3. 7

    Ninguna de las anteriores respuestas trabajado para mí, tal vez estaba basado en una versión anterior de la web?

    Todo lo que necesitaba hacer era establecer el valor de los subyacentes de control, a continuación, llame al método refresh, como a continuación:

    $("#slider").val(50);
    $("#slider").slider("refresh");
    • Se esta trabajando para usted? No se puede encontrar nada acerca de eso en la documentación y no puedo hacerlo funcionar.
    • Informe de un Error: no such method 'refresh' for slider widget instance error en chrome
    • Funciona para mi configuración con JQ 2.1.0 + JQM 1.4.2.
    • Todo en una sola línea… $("#slider").val(50).slider("refresh");
    • gracias es muy útil para mí.. he puesto una upvote para usted:)
  4. 5

    Mal que la respuesta fue el único que trabajó para mí (tal vez jqueryUI ha cambiado), aquí es una variante para tratar con una variedad:

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

    Una parte de @gaurav solución trabajado para jQuery 2.1.3 y JQuery UI 1.10.2 con múltiples controles deslizantes. Mi proyecto es el uso de cuatro gama de controles deslizantes para filtrar los datos con este filter.js plugin. Otras soluciones fueron restablecer el control deslizante controla la espalda a su a partir de finales puntos muy bien, pero al parecer no eran el disparo de un evento que filter.js entendido. Así que aquí está cómo me 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]
            }
        );
    
    });

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

    • He tenido que desplazarse a la derecha aquí para obtener la respuesta correcta. Gracias.
  6. 2

    Es posible activar manualmente eventos como este:

    Aplicar el comportamiento de la barra para el elemento

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

    Establecer el valor del control deslizante de

    s.slider('value',10);

    Desencadenar la diapositiva evento, pasando un objeto de interfaz de usuario

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

    Si usted necesita cambiar el regulador de valores de varias de entrada, utilice:

    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/

  8. 1

    Quería actualizar regulador así como el inputbox.
    Para mí siguientes está trabajando

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

    donde a es objeto de la 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()  );
            });
  9. 1

    En mi caso con jquery, control deslizante con 2 asas únicamente siguiente manera trabajado.

    $('#Slider').slider('option',{values: [0.15, 0.6]});
  10. -1

    De iniciar o actualizar el valor = 0 (por defecto)
    Cómo obtener el valor de la solicitud http

     <script>
           $(function() {
             $( "#slider-vertical" ).slider({
        animate: 5000,
        orientation: "vertical",
        range: "max",
        min: 0,
        max: 100,
        value: function( event, ui ) {
            $( "#amount" ).val( ui.value );
    
      // build a URL using the value from the slider
      var geturl = "http://192.168.0.101/position";
    
      // make an AJAX call to the Arduino
      $.get(geturl, function(data) {
    
      });
      },
        slide: function( event, ui ) {
            $( "#amount" ).val( ui.value );
    
      // build a URL using the value from the slider
      var resturl = "http://192.168.0.101/set?points=" + ui.value;
    
      // make an AJAX call to the Arduino
      $.get(resturl, function(data) {
      });
      }
      });
    
    $( "#amount" ).val( $( "#slider-vertical" ).slider( "value" ) );
    
    });
       </script>
  11. -1

    Finalmente siguiente funciona para mí

    $(«#priceSlider»).control deslizante(‘option’,{min: 5, max: 20,el valor:[6,19]});
    $(«#priceSlider»).control deslizante(«actualizar»);

  12. -3

    Aquí es la versión de trabajo:

    var newVal = 10;
    var slider = $('#slider');        
    var s = $(slider);
    $(slider).val(newVal);
    $(slider).slider('refresh');
    • Un montón de respuestas con el mismo código, sólo distorsionada de copiar pegar.

Dejar respuesta

Please enter your comment!
Please enter your name here