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/