如何将文本添加到jQuery滑块控件？

Question

我正在使用 jQuery UI Slider 插件为我的页面制作滑块，但我想为每个滑块手柄添加不同的标签。滑块的代码是一个简单的div：

<div class="slider"></div>

通过CSS将其转换为滑块：

.ui-slider { position: relative; text-align: left; margin: 1.5em auto 1.5em auto; width:10% }
.ui-slider .ui-slider-handle { position: absolute; z-index: 2; width: 1.5em; height: 1.5em; cursor: default; }
.ui-slider .ui-slider-range { text-align:center; position: absolute; z-index: 1; font-size: .7em; display: block; border: 10; background-position: 0 0; }

.ui-slider-horizontal { height: .8em; }
.ui-slider-horizontal .ui-slider-handle { top: -.5em; margin-left: -.77em; }
.ui-slider-horizontal .ui-slider-range { top: 0; height: 100%; }
.ui-slider-horizontal .ui-slider-range-min { left: 0; }
.ui-slider-horizontal .ui-slider-range-max { right: 0; }

然后，通过脚本添加类。我尝试将文本放在div标签之间，但这不起作用：

<div class="slider">Testing</div>

如何将文本放在滑块手柄的顶部，并允许文本随之移动？

---

编辑：我在滑块手柄顶部显示了文字，但滑块移动时它不会移动。

CSS：

.label {
    z-index:999;
    position:relative;  
}

HTML：

<div class="slider"><div class="label">Testing</div></div>

结果：

编辑2：这是Fiddle。

Answer 1

尝试

$('.slider .ui-slider-handle').text('Hello').css({width:70,'text-align': 'center'});

在$( ".slider" ).slider( {step: 1}, {min:-1}, {max:1}, {value:0} );

之后

jsfiddle

Answer 2

您可以简单地使用jQuery来执行此操作：

<强> CSS

  

.ui-slider-handle {font-size：smaller;文字修饰：无;}

<强>的jQuery

  

$（ “UI-滑块柄 ”）文本（“ 测试”）的宽度（50）;

Answer 3

您可以移动任何/所有子元素，而不仅仅是移动文本。如果您想要拖动更大的项目（例如按钮或图像），这将派上用场。

DEMO

我相信你可以提出一些更清洁的代码;但这只是抓住所有子元素并将它们移动到新锚中。

var slider = $( ".slider" ).slider( {step: 1}, {min:-1}, {max:1}, {value:0} );

slider.each(function(){
    var this$ = $(this);
    var children = this$.children().filter(':not(.ui-slider-handle)');
    this$.find('.ui-slider-handle').append(children);
});