JQuery slider with a value above it that moves with the slider

Question

I made a request / slider slider and styled it with css. ( http://jsfiddle.net/9qwmX/ )

I managed to put the selected value in a div container; but now I want the container to "travel" using the slider accordingly. I tried using the ui.handle property and its css left property, which is a percentage. But the behavior is somewhat strange: sometimes it moves on the left side of the slider, and sometimes with a shift of 10 pixels.

Question: Does anyone know a good way to allow a box containing a sliding slide with a handle?

Answer 1

You can simply attach tooltips that you can add to the handle so that it moves with it. You just need to put it in CSS, for example:

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 borrowed from twitter bootstrap frame}

 .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

You can do something like this to build what you want, I use 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/

Answer 3

Here is how I would do it. To get started:

Use the handle position:

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

Place a slide box with absolute positioning:

 #tijdlijnDatum { position: absolute; } 

And do something with it in the slide event:

 $( "#slider" ).slider({ slide: function(event, ui) { $('#tijdlijnDatum').css({ left: offsetLeft + 'px' }); // etc } });