目前，您可以移动滑块，文本输入将从 0 变为 100。
问题：我想在文本框前添加一个“$”，在文本框后添加一个“k”——即 20 显示为 $20k，而 50 显示为 $50k
最好，我想使用 CSS 来附加“$”和“k”，所以值不受影响。
到目前为止我所拥有的（如上面的 jsfiddle 链接所示）：
HTML：
<div id="container">
<input id="min" type="text" class="sliderValue" data-index="0" value="1" />
<div id="slider"></div>
</div>
CS：
#container {
width:200px;
margin:40px;}
#min, #max {
width: 50px;
height:40px;
border: none;
text-align: center;
font: normal 24px verdana;}
JS：
$(document).ready(function () {
$("#slider").slider({
range: false,
min: 0,
max: 100,
step: 1,
values: [1],
slide: function (event, ui) {
for (var i = 0; i < ui.values.length; ++i) {
$("input.sliderValue[data-index=" + i + "]").val(ui.values[i]);
};
var delay = function () {
var handleIndex = $(ui.handle).data('index.uiSliderHandle');
var label = handleIndex == 0 ? '#min' : '#max';
$(label).html(ui.value).position({
my: 'center top',
at: 'center bottom',
of: ui.handle,
offset: "0, -74"
});
};
setTimeout(delay, 0);
}
});
$("input.sliderValue").change(function () {
var $this = $(this);
$("#slider").slider("values", $this.data("index"), $this.val());
var handle = $(this).attr('id') == 'min' ? 0 : 1;
$(this).position({
my: 'center top',
at: 'center bottom',
of: $('a.ui-slider-handle:eq(' + handle + ')'),
offset: "0, -54"
});
});
$('#min').html($('#slider').slider('values', 0)).position({
my: 'center top',
at: 'center bottom',
of: $('#slider a:eq(0)'),
offset: "0, -54"
});
$('#max').html($('#slider').slider('values', 1)).position({
my: 'center top',
at: 'center bottom',
of: $('#slider a:eq(1)'),
offset: "0, -54"
});
});