jquery - 如何将文本添加到 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 { 字体大小：较小；文字装饰：无；}

jQuery

$(".ui-slider-handle").text("测试").width(50);

Answer 3

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

演示

我相信你可以想出更简洁的代码；但这只是抓住了所有子元素并将它们向下移动到新的锚点中。

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);
});