Jquery UI slider comment faire une boîte de suivre le gestionnaire?

J'espère que c'est l'effet que vous recherchez: http://jsfiddle.net/z3xV3/11/

JS

$(document).ready(function() {

    $("#slider").slider({value:'', min: 0, max: 150, step: 1, range: 'min'});

    var thumb = $($('#slider').children('.ui-slider-handle'));   
    setLabelPosition();    

    $('#slider').bind('slide', function () {        
        $('#sliderValue').val($('#slider').slider('value'));
        setLabelPosition();
    });

    function setLabelPosition() {
        var label = $('#sliderValue');
        label.css('top', thumb.offset().top + label.outerHeight(true));
        label.css('left', thumb.offset().left - (label.width() - thumb.width())/ 2);  
    }

});

HTML

<div id="slider"></div>
<input id="sliderValue" />

CSS

#sliderValue {
    position:absolute;
    width: 50px;
}

En ce qui concerne meilleur!

OriginalL'auteur

Il est en fait assez facile (et très utile) à transformer cela en un simple plugin jQuery. Comme:

JSFiddle: http://jsfiddle.net/PPvG/huYRL/

Notez que j'ai ajouté le support pour déplacer le curseur en saisissant une valeur dans la #sliderValue.

[ Exemple de Code retiré ]

Vous pouvez également choisir de supprimer #sliderValue de l'HTML et de laisser le plugin en créer un pour vous. Dans ce cas, vous devez réécrire le plugin de sorte qu'il serait appelé sur le curseur, au lieu de #sliderValue. À mon avis, ce serait beaucoup plus propre solution.

Mise à jour

En fonction de vos commentaires (et en relisant votre question), j'ai réécrit le plugin exemple.

Si je comprends bien, vous voulez faire quelques calculs basés sur la valeur de la glissière et d'afficher le résultat de ces calculs dans l'étiquette en dessous de la poignée du curseur. Les éléments suivants doivent rendre vraiment facile.

JSFiddle: http://jsfiddle.net/PPvG/q5qg7/

HTML

<div id="slider"></div>

Plugin

(function($) {
$.fn.sliderLabel = function(options) {
var settings = $.extend({
marginTop: 2,
//Margin between the slider handle and the label (in pixels)
callback: function(value) {
return 'Value: ' + value;
}
}, options);
return this.each(function() { //<- maintains chainability
var slider = $(this);
var handle = slider.children('.ui-slider-handle');
var data = slider.data('sliderLabel');
if (handle.length === 0) {
//$(this) isn't a slider (it has no handle)
console.log('[SliderLabel] Error: sliderLabel() can only be called on a slider.');
return;
}
if (data === undefined) {
//First time sliderLabel() is called on this slider
data = {
label: $('<div class="ui-slider-label" />').css('position', 'absolute'),
callback: settings.callback
};
data.label.insertAfter(slider);
function updateLabel() {
var value = slider.slider('value');
var labelText = data.callback(value);
data.label.html(labelText);
data.label.css('top', handle.offset().top + handle.outerHeight() + settings.marginTop);
data.label.css('left', handle.offset().left - ((data.label.width() - handle.width()) / 2));
}
updateLabel();
slider.bind('slide', updateLabel);
} else {
//sliderLabel() was called before; just update the callback:
data.callback = settings.callback;
updateLabel();
}
//Save (or update) the data inside the slider:
slider.data('sliderLabel', data);
});
}
})(jQuery);

Utilisation

$("#slider").slider();
$("#slider").sliderLabel({
callback: function(value) {
return value + '%';
}
});

Comme vous pouvez le voir, le plugin est maintenant appelé le curseur lui-même. Vous pouvez maintenant fournir le plugin avec un rappel, qui permet de faire quelques calculs et de retourner correctement mis en forme de l'étiquette (le HTML est autorisé).

Dans l'exemple ci-dessus, la fonction de rappel prend tout simplement le value qui est transmis à la callbackand ajoute '%'.

OriginalL'auteur

HTML:

<div id="slider"></div>

CSS:

#slider {
width: 200px;
}
#sliderValue {
position: absolute;
left: 0;
bottom: -30px;
width: 40px;
}

jQuery:

$("#slider").slider({
value: '',
min: 0,
max: 100,
range: 'min',
create: function (event, ui) {
$('.ui-slider-handle').append('<input id="sliderValue" />');
},
slide: function (event, ui) {
$("#sliderValue").val(ui.value);
}
});

http://jsfiddle.net/yBfTy/4/

OriginalL'auteur

De prendre votre jsfiddle.

HTML:

<div id="slider"></div>
<input id="sliderValue" />

CSS:

#sliderValue{width:50px;}

Jquery:

$(document).ready(function() {
//Pris slider
$("#slider").slider({value:'',min: 0,max: 150,step: 1, range: 'min',
slide: function( event, ui ) {
$( "#sliderValue" ).val( ui.value + ' timer');
var offset = $(this).find('a').css("left");
$("#sliderValue").css("margin-left", offset);
}
});
$( "#sliderValue" ).val($( "#slider" ).slider( "value" ));
});

OriginalL'auteur