example - Control deslizante jQuery UI: mueva el valor a lo largo de(con) el control

panel colapsable jquery

Question

Usé el componente del control deslizante jQuery UI en mi página para establecer un rango de precios. También puedo usar sus ui.values ​​[] para establecer y mostrar los nuevos valores en otros divs.

¿Cómo puedo hacer para ver el nuevo valor bajo el mango ? Es decir, si moví el asa a $ 100, quiero establecer el texto "$ 100" justo debajo de ese asa.

Por cierto, uso la versión de rango para establecer un rango de precios, así que obtuve DOS mangos en mi control deslizante (mínimo y máximo).

var minPriceRange=100;
var maxPriceRange=500;
$( "#priceRangeSlider" ).slider({
        range: true,
        min: minPriceRange,
        max: maxPriceRange,
        step: 10,
        values: [ minPriceRange, maxPriceRange ],
        slide: function( event, ui ) {
            ("#fromRangeText").text("$" + ui.values[ 0 ]);
            $("#toRangeText").text("$" + ui.values[ 1 ]);
        }
});

Answer 1

Es posible crear un bonito control deslizante al incluir información sobre herramientas de arranque. Aquí hay una versión actualizada del control deslizante utilizando información sobre herramientas de arranque. http://jsfiddle.net/ykay/jL044k1c/

function slide(event, ui) {
    setTimeout(function () {
        $(ui.handle).attr(''title'', ui.value).tooltip(''fixTitle'').tooltip(''show'');
    }, 0);
}
function create(event, ui, start, end) {
    var handles = $(event.target).find(''span'');
    handles.eq(0).tooltip({animation: false, placement: ''top'', trigger: ''manual'', container: handles.eq(0), title: start}).tooltip(''show'');
    handles.eq(1).tooltip({animation: false, placement: ''top'', trigger: ''manual'', container: handles.eq(1), title: end}).tooltip(''show'');
}
$(''#slider'').slider({
    range: true,
    min: 0,
    max: 100,
    values: [20, 80],
    slide: function (event, ui) {
        slide(event, ui)
    },
    create: function (event, ui) {
        create(event, ui, $(this).slider(''values'', 0), $(this).slider(''values'', 1))
    }
});

Answer 2

Puede usar la función de utilidad .position desde jQuery UI para colocar las etiquetas:

$("#slider").slider({
    ...
    slide: function(event, ui) {
        var delay = function() {
            var handleIndex = $(ui.handle).data(''index.uiSliderHandle'');
            var label = handleIndex == 0 ? ''#min'' : ''#max'';
            $(label).html(''$'' + ui.value).position({
                my: ''center top'',
                at: ''center bottom'',
                of: ui.handle,
                offset: "0, 10"
            });
        };

        // wait for the ui.handle to set its position
        setTimeout(delay, 5);
    }
});

Ver acción: http://jsfiddle.net/william/RSkpH/1/ .

Answer 3

change => Este evento se desencadena al detener la diapositiva, o si el valor se cambia programáticamente (por el método del valor). Toma argumentos event y ui. Use event.originalEvent para detectar si el valor cambió con el mouse, el teclado o mediante programación. Utilice ui.value (controles deslizantes de una sola manecilla) para obtener el valor del controlador actual, $ (this) .slider (''values'', index) para obtener el valor de otro handle.

http://docs.jquery.com/UI/Slider#event-change

Answer 4

Estaba persiguiendo el mismo objetivo y decidí ir con la información sobre herramientas de Bootstrap. Puedes probar el código en este JSFiddle .

$(''#slider'').slider({
    range: true,
    min: -60,
    max: 60,
    values: [ init_start_at, init_end_at ],
    slide: function(event, ui) {
        // Allow time for exact positioning
        setTimeout( function(){
            $(ui.handle).attr(''title'', ui.value + ''°C'').tooltip(''fixTitle'').tooltip(''show'');
        }, 5);
    },
    create: function( event, ui ) {
        var target = $(event.target);
        var handles = $(event.target).find(''a'');
        var container, wait;

        // Wait for the slider to be in position
        (wait = function() {
            if ((container = target.parents(''.content'')).length != 0) {
                handles.eq(0).tooltip({animation: false, placement: ''top'',trigger: ''manual'', container: container, title: init_start_at + '' °C''}).tooltip(''show'');
                handles.eq(1).tooltip({animation: false, placement: ''bottom'',trigger: ''manual'', container: container, title: init_end_at + '' °C''}).tooltip(''show'');
            } else {
                setTimeout( wait, 50 );
            }
        })();
    }
});

Espero que ayude a alguien.

Answer 5

puede encontrarlo tan fácilmente en la documentación oficial de la página del control deslizante jQyeryUI en el siguiente ejemplo

http://jqueryui.com/slider/#custom-handle

Answer 6

Simplemente pondría las etiquetas dentro de los mangos, en lugar de reposicionarlos todo el tiempo, como en esta respuesta: https://.com/a/7431057/1250436

$("#slider").slider({
    range: true,
    min: 100,
    max: 500,
    step: 10,
    values: [100, 500],
    animate: ''slow'',
    create: function() {
        $(''#min'').appendTo($(''#slider a'').get(0));
        $(''#max'').appendTo($(''#slider a'').get(1));
    },
    slide: function(event, ui) { $(ui.handle).find(''span'').html(''$'' + ui.value); }
});

Actualizar

Esto no funciona en Chromium para Linux. Se produce un extraño error de gfx.

Vea la demostración en funcionamiento: http://jsfiddle.net/ohcibi/RvSgj/2/