jquery Schieberegler mit Wert darüber, der mit dem Schieberegler

Question

Ich habe einen Slider mit Abfrage/Slider gemacht und gestylt mit CSS. (http://jsfiddle.net/9qwmX/)

Es ist mir gelungen, den ausgewählten Wert in einen div-Container zu setzen; aber jetzt möchte ich, dass der Container mit dem Schieber entsprechend "fährt". Ich habe versucht, die ui.handle und ihre css left Eigenschaft zu verwenden, die ein Prozentsatz ist. Aber das Verhalten ist etwas merkwürdig: Manchmal bewegt es sich mit der linken Seite des Sliders und manchmal mit einem Offset von 10px.

Frage: Kennt jemand eine gute Möglichkeit, die Box, die den rutschte Wert enthält, mit dem Griff reisen zu lassen?

Answer 1

Sie können nur ein Tooltip-like div anhängen, die Sie an dem Griff anhängen kann, so dass es mit ihm mitbewegt. Sie müssen es nur mit CSS positionieren, etwa so:

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 vom Bootstrap-Rahmen twitter entlehnt}

.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

So hätte ich es gemacht. Um Ihnen den Einstieg:

Nutzen Sie die "Griff" Position:

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

Position der Folie Wertefeld mit absoluter Positionierung:

#tijdlijnDatum { position: absolute; } 

und etwas tun, mit ihm in der slide Veranstaltung :

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

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

Answer 3

Sie können so etwas tun, um zu bauen, was Sie wünschen t, ich bin mit 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/