把它变成一个简单的 jQuery 插件实际上很容易（而且非常有用）。像这样：
JSFiddle：http://jsfiddle.net/PPvG/huYRL/
请注意，我通过在#sliderValue 中输入值来添加对移动滑块的支持。
[删除代码示例]
您也可以选择从 HTML 中删除 #sliderValue 并让插件为您创建它。在这种情况下，您将重写插件，以便在滑块上调用它，而不是在 #sliderValue 上调用。在我看来，这将是一个更简洁的解决方案。
更新
根据您的 cmets（并重新阅读您的问题），我重写了插件示例。
如果我理解正确，您想根据滑块的值进行一些计算，并将这些计算的结果显示在滑块句柄下方的标签中。以下内容应该让这变得非常容易。
JSFiddle：http://jsfiddle.net/PPvG/q5qg7/
HTML
<div id="slider"></div>
插件
(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);
用法
$("#slider").slider();
$("#slider").sliderLabel({
callback: function(value) {
return value + '%';
}
});
如您所见，该插件现在在滑块本身上被调用。您现在可以为插件提供回调，它允许您进行一些计算并返回格式正确的标签（允许使用 HTML）。
在上面的示例中，回调只是将value 传递给回调并附加'%'。