如何使用CSS

Question

Here is a link to my JSFiddle

目前追加前文本框中美元符號和「k」的文本框中後，您可以移動滑塊，並輸入文本會改變從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" 
    }); 
}); 

Answer 1

活生生的例子：http://jsfiddle.net/qaU7K/92/

就先加在默認值：

<input id="min" type="text" class="sliderValue" data-index="0" value="$1k" /> 

然後改變這一行：

$("input.sliderValue[data-index=" + i + "]").val(ui.values[i]); 

對於這一點：

$("input.sliderValue[data-index=" + i + "]").val("$" + ui.values[i] + "k"); 

，使div有點大了變化它的width：

#min, #max { 
    width: 76px; /*modified*/ 
    height:40px; 
    border: none; 
    text-align: center; 
    font: normal 24px verdana; 
} 

活生生的例子：http://jsfiddle.net/qaU7K/92/