Control deslizante jQuery UI: mueva el valor junto con el identificador

Question

Utilicé el componente deslizante jQuery UI en mi página para establecer un rango de 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, utilizo la versión de rango - para establecer un rango de precios, así que obtuve DOS mangos en mi control deslizante (mínimo & 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 utilizar la función de utilidad .position de 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 que la acción: http://jsfiddle.net/william/RSkpH/1/.

Answer 2

cambio => Este evento se desencadena en parada de 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 3

me acaba de poner las etiquetas en el interior de las asas, en lugar de ellos reposicionar todo el tiempo, al igual que en esta respuesta: https://stackoverflow.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); } 
}); 

actualización

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

Ver la demo de trabajo: http://jsfiddle.net/ohcibi/RvSgj/2/

Answer 4

me estaba persiguiendo el mismo objetivo y decidí ir con las pistas de Bootstrap. Puede probar el código en this 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

Es posible crear un bonito control deslizante mediante la 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 6

se puede encontrar tan fácilmente en la documentación oficial de la página deslizador jQyeryUI en el siguiente ejemplo

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