control deslizante jquery con valor superior que se desplaza con el control deslizante

Question

He hecho un control deslizante con consulta/control deslizante y lo he diseñado con CSS. (http://jsfiddle.net/9qwmX/)

Logré colocar el valor seleccionado en un contenedor div; pero ahora quiero que el contenedor 'viaje' con el control deslizante en consecuencia. He intentado utilizar ui.handle y su propiedad css left que es un porcentaje. Pero el comportamiento es algo extraño: a veces viaja con el lado izquierdo del control deslizante y, a veces con un desplazamiento de 10px.

Pregunta: ¿Alguien sabe una buena manera de dejar que la caja que contiene el valor deslizado viaje con el mango?

Answer 1

Sólo puede adjuntar un div información sobre herramientas similares que se pueden anexar a la manija de modo que se mueve junto con él. Sólo tienes que colocarlo con CSS, así:

JS

var initialValue = 2012; // initial slider value 
var sliderTooltip = function(event, ui) { 
    var curValue = ui.value || initialValue; // current value (when sliding) or initial value (at start) 
    var tooltip = '<div class="tooltip"><div class="tooltip-inner">' + curValue + '</div><div class="tooltip-arrow"></div></div>'; 

    $('.ui-slider-handle').html(tooltip); //attach tooltip to the slider handle 
} 

$("#slider").slider({ 
    value: initialValue, 
    min: 1955, 
    max: 2015, 
    step: 1, 
    create: sliderTooltip, 
    slide: sliderTooltip 
}); 

CSS^{información sobre herramientas tomado del marco de arranque Twitter}

.tooltip { 
    position: absolute; 
    z-index: 1020; 
    display: block; 
    padding: 5px; 
    font-size: 11px; 
    visibility: visible; 
    margin-top: -2px; 
    bottom:120%; 
    margin-left: -2em; 
} 

.tooltip .tooltip-arrow { 
    bottom: 0; 
    left: 50%; 
    margin-left: -5px; 
    border-top: 5px solid #000000; 
    border-right: 5px solid transparent; 
    border-left: 5px solid transparent; 
    position: absolute; 
    width: 0; 
    height: 0; 
} 

.tooltip-inner { 
    max-width: 200px; 
    padding: 3px 8px; 
    color: #ffffff; 
    text-align: center; 
    text-decoration: none; 
    background-color: #000000; 
    -webkit-border-radius: 4px; 
     -moz-border-radius: 4px; 
      border-radius: 4px; 
} 

Demostración: http://jsfiddle.net/9qwmX/2/

Answer 2

Así es como lo habría hecho. Para empezar:

Hacer uso de la "manija" posición:

var offset = $('.ui-slider-handle .ui-state-default .ui-corner-all"').offset(); 
var offsetLeft = offset.left; 
var offestTop = offset.top; 

posición de la caja de su valor de diapositivas con posicionamiento absoluto:

#tijdlijnDatum { position: absolute; } 

Y hacer algo con él en caso slide :

$("#slider").slider({ 
    slide: function(event, ui) { 

     $('#tijdlijnDatum').css({ left: offsetLeft + 'px' }); // etc 
    } 
}); 

Answer 3

Puede hacer algo como esto para construir lo que desea t, estoy usando event.pageX

var newLeft = 100; 
$('#move').text(100).css('margin-left',115); 
$("#slider").slider(
{ 
      value:100, 
      min: 0, 
      max: 500, 
      step: 50, 
      slide: function(event, ui) { 
       $("#slider-value").html(ui.value); 
       var pos = (event.pageX > newLeft)? event.pageX + 8 
                : event.pageX - 42; 
       newLeft = event.pageX;     
       $('#move').text(ui.value).css('margin-left',pos); 
      } 
} 
); 

Demostración:http://jsfiddle.net/joycse06/Cw6u8/1/