slider jQuery con valore sopra di esso che viaggia con il cursore

Question

Ho fatto un cursore con query/slider e lo ho stilizzato con css. (http://jsfiddle.net/9qwmX/)

Sono riuscito a inserire il valore selezionato in un contenitore div; ma ora voglio che il contenitore "viaggi" con il cursore di conseguenza. Ho provato a utilizzare la proprietà ui.handle e la sua proprietà css left che è una percentuale. Ma il comportamento è un po 'strano: a volte viaggia con il lato sinistro del cursore e talvolta con un offset di 10px.

Domanda: qualcuno conosce un buon modo per far viaggiare la scatola contenente il valore di scorrimento con la maniglia?

Answer 1

Si può solo collegare un div tooltip-like che è possibile aggiungere al manico in modo che si muove con esso. Basta posizionarlo con i CSS, in questo modo:

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^{tooltip preso in prestito dal quadro di bootstrap 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; 
} 

Demo: http://jsfiddle.net/9qwmX/2/

Answer 2

Questo è come l'avrei fatto. Per iniziare:

Fare uso della posizione "gestire":

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

posizione di dialogo il valore della diapositiva con posizionamento assoluto:

#tijdlijnDatum { position: absolute; } 

e fare qualcosa con esso in caso slide :

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

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

Answer 3

si può fare qualcosa di simile per costruire quello che si wan t, io sto 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); 
      } 
} 
); 

Demo:http://jsfiddle.net/joycse06/Cw6u8/1/